09 abril 2014

El envío de Publicaciones Propias como única Forma de Participar en una Comunidad de Google+



Creo, que uno de los errores más grandes de las comunidades en G+ con temáticas definidas y donde participan varios miembros moderado, es permitir la publicación de post o artículos propios por estas razones:

1) Si la publicación se queda ahí y el artículo es de mala calidad o no cumple con una calidad aceptable, los miembros moderadores quedan mal y la comunidad pierde.

2) Si la publicación no cumple una calidad aceptable, y se elimina, también los moderadores quedan mal. Puede haber incluso usuarios que se quejen, de que les eliminaron la publicación y hacerlo público.

3) Promueve una actitud egoísta. Un miembro, puede ver a la comunidad como una "oportunidad" para la autopromoción y no como una "oportunidad" para interactuar compartiendo puntos de vista, conversar sobre intereses comunes o simplemente echar la mano a otros.

Por ello creo que en una comunidad en la que participan varios moderadores (que no sea una comunidad de una marca o negocio) "Lo ideal" es que no se envíen publicaciones propias.

Soluciones

A) No permitir post propios.

B) Permitir post propios, solo a aquellos miembros que aporten en la comunidad y que sean activos en ella. Ante todo: generando debate, contestando preguntas y ofreciendo soluciones. Como un plus: compartiendo otros artículos relevantes, que puedan ser útiles a los miembros.

Si se opta por la segunda, ser claro desde el principio definiendo explícitamente estos aspectos en las normas de uso.

Comunidades exitosas en donde no comparten post propios:

SEO y marketing
Comunidad WEB

Hay que señalar también, que el éxito de las comunidades, no solo se debe a que no se envían publicaciones propias. Todos estos aspectos y que se evidencian si observamos las comunidades, han influido:

1) Una buena integración de los moderadores.
2) Se genera discusión y/o colaboración entre los miembros.
3) Normas de uso claras.
4) Un alto nivel de compromiso de los miembros moderadores en mantener un orden, siendo selectivos y muy estrictos a la hora de permitir el envío de publicaciones (siendo también de terceros).
5) Un compromiso por querer aportar publicando cosas útiles y relevantes para la comunidad en general.


¿Cuál ha sido tu experiencia al participar en las comunidades de Google+? ¿Consideras el envío de artículos propios a comunidades con temática definida un error?


02 abril 2014

Personalizar el Texto de la Descripción del Perfil del Autor en Blogger

En la entrada anterior, veíamos cómo personalizar el perfil del autor. Pues una chica me preguntó por email si era posible que el texto que aparece en la descripción pudiera ser distinto al que aparece en la sección de la Introducción del perfil de Google+, ya que, el que tenía ahí era larguísimo y no lo quería que se mostrara en el cuadro del perfil.

Sí es posible cambiarlo y es muy fácil lograrlo (me salió un verso sin esfuerzo). Solo hay que sustituir la etiqueta de Blogger que hace que aparezca dicha descripción, por el texto que quieres mostrar.

Bueno, para que sea muy fácil para ti también si eso quieres hacer, solo sigue estos simples pasos:

  1. Ingresa al editor del código de tu plantilla yendo a Plantilla > Editar HTML.
  2. Una vez que ingreses al editor, haz click dentro de éste (en el cuadro donde aparece el código), cuidando no mover nada, luego pulsa las teclas Ctrl + F al mismo tiempo para activar el buscador del editor que reconoces porque se ve así:

    Buscador del editor de Blogger
  3. Agrega en el campo del buscador esta linea de código resaltada con fondo amarillo:  <data:post.authorAboutMe/> y pulsa la tecla Enter.
  4. Una vez que el editor te envíe a esa parte, sustitúyela por el texto que deseas mostrar.
  5. Verifica en vista previa si todo luce bien, aunque no verás el cuadro del perfil (si por ejemplo aparece dentro de la entrada) si te asegurarás que todo luzca bien en la página principal, y si es así guarda los cambios en Guardar plantilla
Nota: Si personalizaste el perfil del autor siguiendo el tutorial que menciono al principio, deberás buscar la etiqueta que menciono aquí en el paso 3, y cambiarlo por el texto que deseas que muestre la descripción. Dicha etiqueta la encontrarás en el código que te facilito en el paso 5 del susodicho tutorial.


Agregar enlaces en la descripción

También es posible que agregues un enlace por ejemplo el del mismo blog u otros blogs que tengas y quieras mostrar. Veamos cómo hacerlo ;)

Cómo agregar el enlace de tu propio Blog (donde aparecerá el perfil)
Para agregar el enlace de tu propio blog, solo agrega esta linea de código, entre las lineas del texto de la descripción, donde quieras que aparezca:

<a expr:href='data:blog.homepageUrl'><data:blog.title/></a>

No tienes que editar nada, ese código generará el enlace a tu propio blog, y el texto que mostrará el enlace será el del título de tu blog

Agregar otros enlaces
Imaginemos que tienes otros blogs, y quieres agregar los enlaces en la descripción. Para lograrlo usarás esta linea de HTML, y solo tendrás que editarla como se indica respectivamente en le texto resaltado de rojo:

<a href="Dirección_web_de_la_página" title="Texto_del_tooltip">El texto que se mostrará</a>

El texto del tooltip, es el texto que se muestra al poner el puntero del ratón sobre el enlace.

Ejemplo, agregando el enlace de tu blog
Amante de la tecnología y de la buena música. Editor de <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> donde plasmo mis ideas y comparto con el mundo lo que me apasiona.
Y en lugar de mostrarse es linea de código que ves entre el texto, aparecerá el enlace con el nombre de tu propio blog.

Así de fácil ;)

Última revisión y/o actualización: 00/00/00.


01 abril 2014

Perfil del Autor Debajo de las Entradas Personalizado incluyendo Botones de Redes Sociales

Probablemente sepas que Blogger facilita que los usuarios que han actualizado el perfil de Blogger al de Google+, agregar fácilmente el elemento: "Perfil del autor", para que aparezca debajo de cada entrada.

Hacer que aparezca es muy sencillo, solo tienes que marcar la casilla de la respectiva opción, yendo a Diseño, luego acceder a la opción desde: "Editar", en la sección que corresponde a las entradas del blog.

Este elemento mostrará la foto que tengas agregada en tu perfil de Google+, el nombre que pusiste,  además, el texto que tengas en la sección de Introducción, ya que Blogger utiliza etiquetas propias que obtienen esos datos del perfil. 

Lo que haremos en este tutorial

Vamos a agregar botones de redes sociales al perfil del autor que Blogger facilita, como ya te lo había comentado desde Google+  y también personalizar la apariencia, ya que este elemento se ve muy simple.

El aspecto que tendrá, es el que puedes ver a continuación. Claro, el cuadro del perfil va a verse más bonito con tu foto ;)

Cuadro del perfil de autor


¿Prefieres verlo en acción?, pues échale un vistazo a la demostración.

El archivo de imagen contiene todos los botones: "Twitter, Facebook, Google+, y Pinterest", lo que hace la carga más eficiente, ya que en lugar de enlazar 4 imágenes separadas, estaremos enlazando solo una.

El estilo es plano, minimalista y seguramente te recordará al cuadro del autor en Google+ al ver una publicación (esa es la idea).

Los colores son sólidos, dando un aspecto fresco y moderno.  Como el ancho está definido en porcentaje, éste se adaptará al ancho de la columna principal, así que puede usarse en una plantilla responsive (diseño de respuesta). 

¿Te gusta como se ve?  Entonces veamos cómo lograrlo ;)

Pasos

  1. Activa la casilla de la opción: "Mostrar el perfil debajo de la entrada" desde las opciones de configuración de las entradas, a las que accedes si pinchas en "Diseño", y luego haces click en "Editar", en la sección que dice: "Entradas del blog".


    La imagen arriba muestra parte de las opciones de configuración de la entrada
  2. Ve a Plantilla > Personalizar > Avanzado >Añadir CSS, luego, agrega el siguiente CSS y guardas el cambio en "Aplicar al blog". (Si no te queda claro cómo agregar el CSS visita esta entrada: Agregar CSS desde el diseñador de plantillas).

    .author-profile{overflow:hidden;background:#fafafa;display:block;width:100%;position:relative;bottom:0;left:0;margin:20px 5px 0 0;padding:0 8px 20px}.descripcion{font-size:14px}
    .descripcion a{color:#0E7C94}
    .img_perfil{background:#fafafa;position:relative;z-index:2;top:20px;float:none;display:block;width:85px;height:85px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;margin:0 auto;padding:3px}
    .author-profile:before{height:70px;width:100%;display:block;content:"";position:absolute;right:0;top:0;background:#020202}
    .img_perfil img{border:none;width:85px;height:85px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}
    .nombre_autor{float:none;text-align:center;display:block;font-size:16px;text-transform:uppercase;margin:28px 0 15px}
    .redes-so{width:200px; display:table;margin:-10px auto 8px}.so-perfil{display:table-cell;height:40px;margin:0 auto}
    .so-perfil li{list-style:none;float:left;border:none;margin:7px;padding:0}
    .so-perfil li a{background:url(http://1.bp.blogspot.com/-CRmHitffnxM/UwlzeQgT8aI/AAAAAAAAPsI/2L3UklpLbOA/s1600/redes-sociales.png) no-repeat 0 0;display:block;position:relative;width:32px;height:32px;margin:0;padding:0}
    .so-perfil li a.twitter{background-position:0 0}
    .so-perfil li a.googlep{background-position:-37px 0}
    .so-perfil li a.facebook{background-position:-74px 0}
    .so-perfil li a.pinterest{background-position:-111px 0}
    .so-perfil li a span{background:#2c2c2c;position:absolute;top:-50px;left:50%;margin-left:-66px;width:120px;height:auto;opacity:0;filter:alpha(opacity=0); zoom: 1; text-align:center;color:#fff;white-space:nowrap;font-size:12px;transition:all .25s ease-in-out;padding:5px}
    .so-perfil li a
    span:before{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #2c2c2c;display:none\0/}
    .so-perfil li a:hover span{opacity:1;filter:alpha(opacity=100);top:-35px;text-decoration:none}


  3. Luego, ve a Plantilla > Editar HTML, y activa el buscador del editor, haciendo click dentro del editor, cuidando no mover nada, luego, pulsa las teclas Ctrl + F simultáneamente. 
  4. Ya que activaste el buscador del editor, pones en el campo esta linea de código:<b:if cond='data:post.authorAboutMe'> y pulsa "Enter", de ese modo el editor nos llevará a la primera linea de código que hace que aparezca el perfil del autor.
  5. Una vez que el editor te envíe a esa linea de código, y que en la imagen de abajo aparece con fondo amarillo, selecciona todo el código del perfil, tal y como se muestra en la imagen, y cámbialo por el código que está debajo de dicha imagen:



    CÓDIGO
    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.authorAboutMe'><div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><b:if cond='data:post.authorPhoto.url'><div class='img_perfil'><img expr:src='data:post.authorPhoto.url' itemprop='image' width='50'/></div> </b:if><div><a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><span class='nombre_autor' itemprop='name'><data:post.author/></span>           </a></div><span class='descripcion' itemprop='description'><data:post.authorAboutMe/></span><div class="redes-so"><ul class='so-perfil'><li><a class='twitter' href='#URL_DE_PAGINA_DE_TWITTER'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='#URL_DE_PAGINA_DE_FACEBOOK'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='#URL_DE_PAGINA_DE_GOOGLE_PLUS'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='#URL_DE_PAGINA_DE_PINTEREST'><span>Sígueme en Pinterest</span></a></li> </ul></div></div></b:if></b:if>

  6. En el código anterior, pon la dirección web (URL) de cada página de red social respectivamente, tal y como se indica en el texto resaltado de rojo. Para ello localiza el texto que indica dónde poner la URL de cada red, que son estas:

    #URL_DE_PAGINA_DE_TWITTER que cambiarás por la dirección web de tu página en Twitter.
    #URL_DE_PAGINA_DE_FACEBOOK que cambiarás por la dirección web de tu página en Facebook.
    #URL_DE_PAGINA_DE_GOOGLE_PLUS que cambiarás por la dirección web de tu página de Google+.
    #URL_DE_PAGINA_DE_PINTEREST que cambiarás por la dirección web de tu página de Pinterest.

    Nota: Ten cuidado de no quitar la comilla (') que aparece antes y después de donde va la URL de cada página de red social; si la quitas, te va a marcar error el editor. Para Obtener la dirección web de cada página, tienes que ir a la página respectiva de cada red social, y copiarla desde la barra de direcciones de tu navegador. 
  7. Una vez que pongas todas las URLs respectivamente, verifica en vista previa que todo luzca bien y si es así, guarda los cambios.
¿Fácil verdad? Si quieres cambiar los colores, échale un vistazo a las siguientes indicaciones:


Personalizar colores

1. Cambiar fondo negro. Localiza esta parte del CSS del paso 2: #020202 y cámbialo por el color HTML que quieras. Para ello puedes consultar esta tabla de colores.

2. El fondo del cuadro. (Es gris claro) Localiza esta parte #fafafa y cámbialo por el color HTML que quieras. Para ello consulta una tabla de colores HTML.

Notas Finales importantes

  • La imagen se ve redonda ya que usamos una propiedad de CSS que lo hace, y funciona en navegadores modernos. Para el caso de Internet, IE9 en adelante; actualmente tienen la versión 11. En el caso de navegadores antiguos (IE8 y anteriores) se va a ver cuadrado.
  • La animación del tooltip funciona en IE10 en adelante y el resto de navegadores modernos.
  • Excepto por las lineas con algunos hacks para asegurar el soporte en más versiones de navegadores, por ejemplo: (filter:alpha(opacity=0) todo el CSS es válido. 
En el caso de Internet Explorer versión 8 y 7, la imagen del perfil se va a ver cuadrada, ya que no soporta la propiedad que usamos para hacer que la imagen se vea redonda (border-radius).


Información útil y Referencias.

Si quieres aprender la técnica para hacer aparecer el tooltip animado, échale un vistazo a esta entrada que explica cómo hacerlo: http://goo.gl/kyvLmx.

Última revisión y/o actualización: 00/00/00.




25 marzo 2014

Congruencia ante todo

Hombre dudando


El mundillo que entraña Internet es complejo. Una buena parte de tiempo estás en contacto con personas que no sabes si son quienes dicen que son.

Recomendar que se actúe de un modo y luego hacer lo contrario, deja mucho qué pensar. Imagina que alguien dice públicamente que es vegetariano, y luego le vez en un restaurante sirviéndose tremendos filetes. A eso me refiero :)

En Internet también se ven casos como esos. A veces se evidencia, a veces no tanto, pero pasa. Cuando nos damos cuenta de ello, viene entonces la pregunta: ¿en quién voy a creer? 

Esto resulta crucial cuando buscamos depositar nuestra confianza en alguien para llevar a cabo una tarea determinada en el ámbito que sea. Si estás en busca de un profesional para lograr un objetivo, por ejemplo.

Por ello, hay que ser muy observadores y cuidadosos, antes de depositar la confianza en alguien y siempre investigar.

Duda si:

  • Alguien te dice que Blogger es mejor, que deberías usarlo, y usa Wordpress.
  • Te dicen que instalar música en el blog es súper cool, y todo blog debería tener, y jamás la han puesto en su blog.
  • Te dicen no deberías enviar publicaciones propias de forma desmedida a las comunidades de Google+ y lo hacen.
En resumen, duda de toda aquella persona que actúa de forma contraria a lo que dice hacer o recomienda.

¿Y tú cuándo dudas?