Personalizar Disqus con CSS

He visto muchos blogs en los que se utiliza Disqus como sistema de comentarios, lamentablemente esta magnífica extensión sólo posee 2 estilos: Houdini y Narcissus, y para algunos puede significar un contra al momento de usarla en su plantilla ya que la adaptación a veces no es muy buena.

Si bien en la página de Disqus explican los pasos para añadir CSS personalizado, no muestran los selectores necesarios para modificarlo, y en esta oportunidad mencionaremos los más importantes para que puedan así personalizar sus formularios exitosamente.

El tutorial:

Antes de empezar el tutorial aclararé que es posible insertar CSS directamente en la plantilla del blog o desde el escritorio de Disqus (Settings | Appearance). Recomiendo a ciegas que usen la función integrada de Custom CSS en Disqus para evitar así problemas de atributos (Si los insertan directamente en la plantilla necesitarán sobreescribir cada atributo con el valor !important).

Lista de selectores:

/*DISQUS SELECTORES CSS*/

.dsq-content-stub { /*LOGO DISQUS CARGANDO*/
}

/*SECCIÓN PARA POSTEAR*/
.dsq-post-area { /*Contenedor post completa*/
}

.placeholder { /*Textarea para comentar*/
}

.dsq-request-user-stats { /*Status del usuario*/
}

.dsq-button { /*Botón comentar*/
}

.dsq-subscribe-rss { /*Enlace suscripción RSS*/
}
.dsq-subscribe-email { /*Enlace e-mail*/
}

.dsq-comments-title {/*Mostrando X comentarios*/
}


/*COMENTARIOS*/

.dsq-comments { /*Contenedor de todos los comentarios*/
}
.dsq-header-avatar { /*Avatar del comentarista*/
}

.dsq-full-comment { /*Contenedor de comentario único*/
}

.dsq-comment-cite { /*Enlace nombre de perfil*/
}

.dsq-comment-header-meta { /*Cabecera comentarista*/

}

.dsq-comment-body { /*Cuerpo del mensaje*/
}

.dsq-button-small  { /*Botones del comentario*/
}

.dsq-pagination { /*Paginación de comentarios*/
}

/*FOOTER DISQUS*/

.dsq-item-trackback { /*Sección Trackbacks*/
}

Para que puedan modificar cada item de manera correcta he añadido un comentario destacado en color verde, recuerda que puedes aplicar los atributos que desees, si no sabes usar CSS te recomiendo que leas esta guía para que empieces a hacer tus propios cambios.

Si lo deseas puedes revisar este blog de pruebas para comprobar que la personalización funciona correctamente. El código que utilicé fué el siguiente, puede servirles como ejemplo:

.dsq-comment-body {
background:#fff;
border:1px solid #c0c0c0;
color:#222;
padding-bottom:10px;
font-size:12px;
font-family: Century Gothic, sans-serif;
}

.dsq-comment-text {padding:10px;}
.dsq-comment-header {background:#3d7196;color:#fff;margin-left:-6px;}
.dsq-comment-header a {color:#fff;}

#dsq-content .dsq-avatar img {
border: 0 none;
box-shadow:inset 1px 1px 1px #c0c0c0;
border-radius: 3px;
height: 36px;
width: 36px;
}

#dsq-content .dsq-avatar {
-webkit-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
-moz-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
-o-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
z-index:200;
}

Importante:

Si hay algunas classes que no haya agregado puedes comprobarlas tu mismo con Firebug, una extensión para Firefox que permite analizar cada elemento y así detectar las classes. Si usas Google Chrome basta con seleccionar un elemento con botón derecho del mouse y selecciona "Inspeccionar elemento", ya que este último navegador incluye ya algo similar.

Otro método para crear una página de inicio

Este es otro método sencillo para hacer que el home de un blog de Blogger no muestre las entradas sino algún tipo de presentación y, como cualquier otro, tiene sus pros y contras ya que todos ellos sólo son simulaciones incompletas (más información)

En este caso, vamos a usar la Configuración de Blogger para indicar, en la pestaña Formato, que la cantidad de entradas a mostrar en el home de nuestro sitio es cero:

Si hacemos esto, obviamente, no veremos nada de nada aunque las entradas seguirán mostrándose normalmente lo mismo que las páginas estáticas.

Lo que necesitamos ahora es aprovechar que Blogger nos permite agregar datos a las URLs sin que eso provoque errores; por lo tanto, si queremos ver completo ese blog con cero entradas en el home, podríamos usar una URL de este tipo:

miblog.blogspot.com/search?inicio

Con esas dos cosas en mente, trato de armar la plantilla.

Por ejemplo, voy a usar un blog "normal" y, justo antes de <div id='content-wrapper'> voy a poner esto que no es otra cosa que un simple enlace al blog completo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='homepage'>
    <a href='miblog.blogspot.com/search?inicio'> ENTRAR </a>
  </div>
</b:if>

Los detalles del CSS dependerán de muchas cosas, sobre todo, de la idea que se quiera llevar a cabo. En este demo online también ocultaré la sidebar y todo contenedor, excepto el header. Para eso, condiciono el estilo agregando algo así:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <style>
    #content-wrapper {
      display:none;
    }
    #homepage { /* es el DIV contenedor */ }
    #homepage a { /* es el enlace */ }
  </style>
</b:if>

Como estoy ocultando todo, no debo olvidarme de hacerlo visible en la página de diseño, sino, no podré acceder a los gadgets así que entre <b:skin> y </b:skin> coloco esto:

body#layout #content-wrapper {display:block;}
body#layout #homepage {display:none;}

Aumentar el título del blog o imagen de la cabecera al pasar el cursor

Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ningún script, todo es CSS.

Uno de estos efectos que me han preguntado es cómo hacer para que la imagen de la cabecera (o el título del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.

Primero hay que procurar tener la imagen en un tamaño grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentará a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o más.

Luego, hay que saber las medidas que tendrá la imagen cuando esté pequeña, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (¿ves? te dije que algún día te serviría)

Ahora sí, entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:

#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde verás a cuál corresponde cada una.
Si lo crees conveniente puedes agregar unos márgenes para que la imagen no parezca que se va hacia la derecha, es decir, que dé la impresión que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:

margin-top:-10px;
margin-left:-30px;

Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del blog.


Nombre de mi blog



El procedimiento es similar; agrega antes de ]]></b:skin> esto:

#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamaño del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Aquí es menos complicado pues no tienes que saber las medidas de ninguna imagen, sólo debes poner el tamaño de la fuente que tendrá el título del blog al pasar el cursor. Aunque por supuesto puedes agregar ahí otras propiedades como un color diferente, y también puedes usar los márgenes para que el texto se aumente desde el centro, pero si no quieres estas dos últimas opciones puedes eliminarlas sin problema.

Y así de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no verán ningún efecto de deslizamiento. Otra razón más para usar un navegador moderno.

Conduce un coche en Google Street View

Conducir un coche vía Google Street View es una iniciativa de Peugeot para promocionar su vehiculo RCZ y para ello te proporciona esta aplicación que te permite hacerlo. Debes seleccionar el punto de salida y el de llegada para empezar a conducir en Google Street View.

Google en cifras

BusinessMBA ha publicado esta infografía mostrando algunos datos de Google, ante los números sobran explicaciones.

Alternativa para reproducir videos de YouTube

Hay varios reproductores que permiten reproducir videos de YouTube sin utilizar el que provee el servicio. Aunque suelen ser archivos o scripts pequeños, para quien no quiera molestarse en alojar alguno de ellos en su propio servidor, siempre queda la alternativa de usar el JWplayer que puede ser configurado y personalizado, ayudándose con los datos que brinda su página de opciones.

La URL del reprooductor es http://player.longtailvideo.com/player.swf y el código a utilizar es similar al de cualquier otro archivo de Flash:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="movie" value="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

donde XXXXXXXXXXX son los once caraceteres que identifican a cada video y a l ocual, le podemos adosar otros parámetros tales como colores:

http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX&screencolor=000000&backcolor=000000&frontcolor=FFFFFF&lightcolor=CCCCCC

Una variante de ese código, nos permite no tener que duplicar esos datos por comodidad, colocándolos en el parámetro flashvars:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashvars" value="file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

Lo interesante de este reproductor, es que permite agregar otro tipo de archivos de video como FLV o MP4, utilizando la misma sintaxis:

<param name='flashvars' value='file=URL_archivo.FLV'>

Menú horizontal para Blogger (Con descripción en cada enlace y animaciones).

Usando las transiciones CSS3 he hecho otro menú para Blogger el cual tiene un leve desplazamiento en cada enlace al situar el mouse sobre éstos, además de incluir una descripción debajo de cada título.

Puedes ver el resultado del menú observando el siguiente ejemplo:

• Enlace 1
  Lorem Ipsum
  
• Enlace 2
  Lorem Ipsum
  
• Enlace 3
  Lorem Ipsum
  
• Enlace 4
  Lorem Ipsum
  

El tutorial:

Paso 1: Añadiendo los estilos:

En "Diseño | Edición HTML" deberás buscar el siguiente código:

]]></b:skin>

Arriba de este deberás pegar el siguiente:

#menu-soft {
width:100%;
padding:0;
color:#d9d9d9;
font-family: Century Gothic;
overflow:hidden;
background:#222;
}

#menu-soft ul {
width:940px;
margin:0auto;
}


#menu-soft a {
color:#d9d9d9;
font-weight:normal;
}

#menu-soft ul {
list-style:none;
display:block;
margin:0;
padding:0;
}

#menu-soft li {
float:left;
padding:10px;
display:block;
width:100px;
border-left:1px solid #2d2d2d;
/*Duración de transiciones*/
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
-o-transition:0.7s;
transition: 0.7s;
}

#menu-soft li:hover {
padding-left:50px;
cursor:pointer;
background:#1bb1bb;
}
#menu-soft li:hover a {
color:#fff;
text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222;
}

#menu-soft li span {
font-size:24px;
}

Paso 2: Añadiendo el menú:

Ahora deberás buscar algún lugar en donde ubicar el menú, recomiendo arriba de la siguiente sección:

<div id='content-wrapper'>

 Deberás insertar el siguiente código en la sección deseada:

<div id="menu-soft">
<ul>
<li id="enlace-1"><a href="#"><span>Enlace 1</span><br>Descripción 1</br></a></li>
<li id="enlace-2"><a href="#"><span>Enlace 2</span><br>Descripción 2</br></a></li>
<li id="enlace-3"><a href="#"><span>Enlace 3</span><br>Descripción 3</br></a></li>
<li id="enlace-4"><a href="#"><span>Enlace 4</span><br>Descripción 4</br></a></li>
</ul>
</div>

 Previsualiza los cambios y si son satisfactorios guardas la plantilla.

Importante: Para añadir otro enlace basta con insertar el siguiente código debajo del último </li>:

<li id="enlace-5"><a href="#"><span>Enlace 5</span><br>Descripción 5</br></a></li>

Recuerda que si haz añadido otros enlaces es necesario modificar el número del ID ya que habrán errores y la plantilla no se guardará.

Si quieres personalizar los enlaces de manera individual puedes hacerlo editando los siguientes ID's:

• #enlace-1
• #enlace-2
• #enlace-3
• #enlace-4

Recuerda que al modificar el color de manera individual al pasar el cursor tienes que hacerlo con la pseudo clase ":hover".

Ejemplo:

#enlace-1:hover {
background:orange;
}

En el ejemplo anterior se modificará el color del primer enlace SÓLO al pasar el cursor sobre el enlace, deberás hacer lo mismo con cada ID para personalizar cada elemento de manera individual.

Mark Zuckerberg reconoce que se han equivocado muchas veces y se compromete a guardar nuestra privacidad

Mark Zuckerberg ha publicado un articulo en su pagina de Facebook donde reconoce abiertamente que han cometido un montón de errores, titulando dicho articulo Nuestro compromiso con la comunidad de Facebook, en el que además destaca algunas medidas que van a tomar para la protección de datos y privacidad de los usuarios de Facebook.

Como el anuncio nos parece bastante importante, hemos hecho una traducción (libre e incompleta) de algunas de las explicaciones que da en su página.

Yo fundé Facebook con la idea de que la gente quiere compartir y conectar con otra gente en sus vidas, pero para hacer esto todo el mundo necesita un control completo sobre con quién comparte con todo el tiempo.

Esta idea ha sido el núcleo de Facebook desde el primer día. Cuando construí la primera versión de Facebook, casi nadie que conocía quería una página pública en Internet. Parecía aterrador. Pero cuando pudieron hacer su página privada, se sintieron seguros de compartir con sus amigos en línea. El control fue clave. Con Facebook, por primera vez, la gente tenía las herramientas necesarias para hacerlo. Así es como Facebook se convirtió en la más grande comunidad en línea del mundo. Lo hicimos fácil para que la gente se sienta a gusto compartiendo cosas sobre su vida real.

Hemos añadido nuevas herramientas desde entonces: compartir fotos, crear grupos, comentarios y mensajes de tus amigos y, últimamente, escuchar música o ver vídeos juntos. Con cada nueva herramienta, hemos añadido nuevos controles de privacidad para asegurarse de que siguen teniendo el control total sobre quién puede ver todo lo que compartimos. Debido a estas herramientas y controles, la mayoría de la gente comparte muchas cosas más hoy que hace unos años.

En general, creo que tenemos un buen historial sobre ofrecer transparencia y control sobre quién puede ver su información.

Dicho esto, yo soy el primero en admitir que hemos cometidos un montón de errores. En particular, creo que un pequeño número de errores graves, como el Beacon hace cuatro años y una mala ejecución de nuestro modelo de privacidad hace dos años, a menudo han eclipsado gran parte del buen trabajo que hemos hecho.

Yo también entiendo que muchas personas son por naturaleza escépticas de lo que significa para cientos de millones de personas compartir en línea información personal, en especial con alguno de los servicios. Incluso si nuestros registros de privacidad fuesen perfectos, creo que mucha gente todavía se pregunta con razón cómo su información está protegida. Es importante que la gente piense acerca de esto, y no pasa ni un solo día sin que piense en lo que significa para nosotros ser los administradores de esta comunidad y su confianza.

Facebook siempre ha estado comprometido con la transparencia sobre la información que ha almacenado con nosotros - y nos han llevado a la construcción de herramientas para dar a la gente la capacidad de ver y controlar lo que comparten.

Pero también podemos hacerlo mejor. Estoy comprometido a hacer de Facebook el líder en materia de transparencia y control sobre la privacidad.

Como hemos crecido, hemos hecho nuestro mejor esfuerzo para escuchar con atención a las personas que utilizan Facebook. También trabajamos con los reguladores, abogados y expertos para informar a nuestras prácticas y políticas de privacidad. Recientemente, los EE.UU. Comisión Federal de Comercio estableció acuerdos con Google y Twitter que están ayudando a dar forma a las nuevas normas de privacidad de nuestra industria. Hoy en día, la FTC anunció un acuerdo similar con Facebook. Estos acuerdos crean un marco de cómo las empresas deben acercarse a la vida privada en los Estados Unidos y alrededor del mundo.

Para Facebook, esto significa que estamos haciendo un claro y formal compromiso a largo plazo para hacer las cosas que siempre hemos tratado de hacer y que planeaba seguir haciendo - dar las herramientas para controlar quién puede ver su información y luego asegurarse de que sólo aquellas personas que pretenden puedan verlo.

En los últimos 18 meses, hemos anunciado más de 20 nuevas herramientas y recursos diseñados para darle más control sobre su experiencia en Facebook...

Incluso antes de que el acuerdo anunciado hoy por la FTC, Facebook ya había abordado de manera proactiva muchas de las preocupaciones de la FTC planteadas. Por ejemplo, la queja que nos menciona sobre nuestro Programa de Aplicaciones verificadas, que se canceló hace casi dos años en Diciembre de 2009. La misma queja también menciona los casos en que los anunciantes inadvertidamente recibieron los números de identificación de algunos usuarios en las direcciones URL de referencia. Hemos arreglado el problema hace más de un año atrás, en mayo de 2010.

Además de estos cambios en el producto, la FTC recomienda también la mejora de nuestros procesos internos. Hemos adoptado estas ideas, también, al acordar mejorar y formalizar la manera en que hacemos la revisión de `privacidad como parte de nuestro proceso continuo en el desarrollo de productos. Como parte de esto, vamos a establecer una auditoría bianual independiente de nuestras prácticas de privacidad para asegurar que estamos cumpliendo con los compromisos que asumimos.

Aún más, a partir de hoy voy a crear dos nuevos roles directivo en la empresa para asegurar que nuestros compromisos se reflejarán en lo que hacemos internamente - en el desarrollo de nuestros productos y la seguridad de nuestros sistemas - como externa - de la manera en como trabajar en colaboración con los reguladores, agencias gubernamentales y grupos de privacidad de todo el mundo:

- Erin Egan se convertirá en Jefe de Privacidad, Política. Erin recientemente se unió a Facebook después de servir como socio y co-presidente sobre la privacidad y la seguridad de los datos de Covington&Burling a nivel mundial, respetada empresa sobre el derecho internacional. A lo largo de su carrera, Erin ha estado profundamente involucrado en los esfuerzos legislativos y reglamentarios para hacer frente a la privacidad, seguridad de datos, spam, spyware y otros asuntos de protección al consumidor. Erin llevará nuestro compromiso en el discurso público global y el debate sobre la privacidad en línea y garantizar que la información de los reguladores, legisladores, expertos y académicos de todo el mundo se incorpora a las prácticas y políticas de Facebook.

- Michael Richter se convertirá en Director de privacidad, en los productos. Michael es actualmente Asesor Principal de Privacidad de Facebook en nuestro equipo legal. En su nuevo cargo, Michael se une a nuestra organización de producto para ampliar, mejorar y formalizar nuestro programa existente sobre la revisión interna de privacidad. Él y su equipo trabajarán para asegurar que los principios de control de usuario, intimidad mediante el diseño y la transparencia son integrados sistemáticamente en tanto en Facebook como en el proceso de desarrollo de productos y en nuestros propios productos.

Estas dos posiciones fortalecerán aún más los procesos que aseguran que el control de la privacidad está incorporado en nuestros productos y políticas. Estoy orgulloso de tener dos personas tan expertas sobre privacidad que van a servir en estas funciones.

El anuncio de hoy formaliza nuestro compromiso con el que se proporciona el control sobre su privacidad y la distribución - y también proporciona protección para asegurar que su información sólo se comparte en la forma en que usted desea. Como fundador y CEO de Facebook, espero con interés trabajar con la Comisión al implementar este acuerdo. Es mi esperanza que este acuerdo deja en claro que Facebook es el líder cuando se trata de ofrecer control de las personas mayores de la información que comparten en línea.

Por último, también quiero reafirmar el compromiso que hice cuando lancé por primera vez Facebook. Servirles de la mejor manera posible y trabajar cada día para ofrecerle las mejores herramientas para que usted pueda compartir con los demás y el mundo. Vamos a seguir para mejorar el servicio, crear nuevas formas para que usted pueda compartir y ofrecer nuevas formas de proteger a usted y a su información mejor que cualquier otra compañía en el mundo.

Importante el discurso pero habría que aclarar que lo que nos quiere vender aparentemente como algo voluntario es debido a unos cargos que había contra Facebook por parte de la Comisión de Comercio encargada de velar por la privacidad de los ciudadanos estadounidenses y que era un procedimiento en su contra en toda regla.

Esperemos que ahora si cumplan con nuestro derecho a la privacidad...

Insertar vídeos HTML5 en Blogger

Existen distintas formas de incluir vídeos en Blogger, ya sea por subida, usando Youtube, JWPlayer, etc.

Como HTML5 ya está practicamente en la mayoría de los navegadores web actuales, es posible insertar esta clase de vídeos fácilmente con la etiqueta </video> que sin duda es mucho más sencillo que usar un plugin u otra clase de embed.

El resultado del tutorial será muy similar a este (Los controles varían según navegador):

Tutorial:

Para hacer un embed básico de un vídeo podemos hacerlo con el siguiente código:

<video controls="controls" height="230" src="URL-VIDEO" width="520">
<span style="background: red; color: white;">Advertencia: Tu navegador no soporta HTML5, por favor actualízalo para ver el vídeo de este blog.</span>
</video>

Explicación:

• controls: Al definirlo se muestran los controles de navegación.
• height: Corresponde al alto del vídeo.
• width: Corresponde al ancho del vídeo.
• src: En esta línea deberás especificar la URL del vídeo.

El código resaltado en color es opcional, lo agregué para que los usuarios que no tienen un navegador compatible puedan ver un mensaje y así tengan que usar otro navegador o bien puedan actualizar el actual.

Otros atributos que puedes usar:

• autoplay: Define si quieres que se reproduzca automáticamente el vídeo, tienes que establecerlo en autoplay (autoplay="autoplay").
• loop: Permite que el vídeo se reproduzca nuevamente al finalizar, establecer en loop (loop="loop").
• muted: Desactiva la salida de audio del vídeo, establecer como muted (muted="muted").
• poster: Permite asignar una imagen como vista previa del vídeo, establécelo como una imagen (poster="URL-IMAGEN-PREVIA").
• preload: Con esto hacemos que el vídeo precargue sin necesidad de intervención, establecer en auto, metadata o none.

De momento la etiqueta </video> no tiene un botón para pantalla completa, pero algunos navegadores muestran una opción para ver el vídeo en pantalla completa al presionar botón secundario en el vídeo.

Extra:

Si quieres usar un reproductor HTML5 que sí tenga esta característica puedes optar por VideoJS, otro reproductor HTML5 100% personalizable con CSS y además es muy fácil de implementar.

Evento SMExp en San Sebastian de @Walnuters

¿Qué es #SMExp?

Social Meda Experience, un evento que responde a la filosofía 2.0 de compartir, difundir y ayudar a través de la participación y en un marco de relación que conecta a profesionales del marketing, la comunicación y las nuevas tecnologías con empresas para intercambiar dudas e ideas en torno a la actividad en redes sociales de sus marcas.

Mecánica:

El mecanismo del evento se inicia con una pequeña exposición por parte del empresario u organización que expone su proyecto o empresa a la sala. A continuación un consultor de @Walnuters plantea las bases sobre las que él incorporaría ese proyecto en los Medios Sociales y abre un debate para que podamos tener una gran “lluvia de ideas sobre el proyecto presentado". Es el lugar perfecto donde los asistentes aportan sus opiniones y mejoras de manera espontánea a una marca o empresa (tal y como lo harían en una red social).

Social Media Experience va acompañado de las aportaciones que los asistentes pueden hacer no solo a nivel presencial sino además a través de redes sociales tales como twitter, en la que todos aquellos que lo deseen pueden aportar sus ideas mediante el hashtag #SMExp. Además el evento cuenta con retransmisión por streaming, por lo que la gente que no esté presente en el auditorio también puede participar.

La filosofía del evento, impregnada del carácter colectivo, muestra de manera cercana y mediante aportaciones libres de los asistentes, pensamientos fugaces que entre todos se moldean para dar lugar durante un par de horas a un espacio de coworking, donde salen a la luz posibles ideas de negocio, estrategias de implementación del social media o distintos públicos objetivos de la marca o cliente.

En definitiva, un evento que representa la esencia del Social Media, de colaboración en un espacio comunitario y multidisciplinario donde todos ganan: las marcas, porque obtienen ideas y visibilidad, y los consultores, porque tienen la posibilidad de demostrar su talento y aprender del de los demás.

En este estreno en San Sebastián, vamos a contar con el apoyo de las siguientes organizaciones: ASOCIACIÓN DE HOSTELERÍA DE GIPUZKOA, FEDERACIÓN GUIPUZCOANA DE GOLF y ADEGI (Asociación de Empresarios de Guipuzkoa).

En definitiva, se trata de un evento innovador, basado en la mutua colaboración y donde todos ganan. Un encuentro donde por un lado, los invitados obtienen ideas de las que nutrirse y visibilidad ante un público interesado, y por otro, el público tiene otra oportunidad de “demostrar” su valía, su experiencia y talento y sobre todo seguir aprendiendo del resto de profesionales presentes.

¿Te lo vas a perder?

Autor: Evaristo Nogales, profesor de Marketing en la Universidad de Sevilla, emprendedor y apasionado del marketing y la comunicación. Puedes encontrarlo en Google Plus

Sorprendentes datos de SlideShare, red que hay que tener en cuenta

SlideShare ha publicado su primera infografía con datos sobre la plataforma, datos que sorprenden por lo poco que conocíamos sobre ellos pero que nos hacen pensar que es una plataforma que debemos empezar a tener muy en cuenta a la hora de generar contenidos.

Aplicación de Facebook que te recomienda usuarios o páginas a seguir

Likester Affinities es una aplicación para Facebook que te recomienda paginas o usuarios según tus intereses, para ello puedes seleccionar que te los muestre basándose en los datos de tu perfil de Facebook o según los "me gusta" que has lanzado.

Me ha sorprendido gratamente, cuando he seleccionado por mi perfil las recomendaciones no han sido muchas pero me ha advertido de que no estaba relleno, lo cual es cierto pero cuando he seleccionado que me recomendara según los "me gusta" todas las que me ha mostrado me han gustado, cosa difícil cuando se trata de mi.

Fecha tipo calendario en las entradas del blog

Hay una forma muy particular de mostrar la fecha que llama mucho la atención a muchos, y es la fecha tipo calendario, que le da un aspecto bastante interesante y distinto a este dato de las entradas que usualmente no le damos mucha importancia.

Para poner la fecha tipo calendario en el blog, primero descarga este archivo, es el que contiene todas las imágenes del calendario, elige la que más te guste y súbela a Picasaweb o al hosting que prefieras.

Luego entra en Configuración | Formato | Formato de cabecera de fecha, y cambia la fecha de manera que quede primero el día, luego el mes y por último el año, por ejemplo: 29 noviembre 2011

Si usas la nueva interfaz entonces entra en Configuración | Idioma y formato | Formato de cabecera de fecha, y cámbiala de igual forma.

Ahora entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Es posible que la encuentres dos veces, la segunda es la que nos interesa.

Ya que la hayas localizado elimínala y en su lugar pon esto:

<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>

Ahora agrega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";

document.write(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del año */
}
</style>
</b:if>

Agrega la URL de la imagen donde se indica y listo. En color verde verás dónde cambiar el color de los datos de la fecha.
Si el calendario no se viera por completo, o si quieres que se muestre dentro del post cambia el -70px  por 0px
El archivo contiene 14 imágenes con distintos colores para que elijas el que mejor se adapte a los colores de tu plantilla.

ACTUALIZACIÓN: Es importante que para que la fecha pueda mostrarse primero deba estar habilitada en las entradas, para ello ingresa a Elementos de la página | Entradas del blog, y haz click en Editar, ahí marca la casilla de la fecha. Si usas la nueva interfaz sigue el mismo procedimiento entrando en Diseño.

Carrousel automático con las imágenes de las entradas

Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"

Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.

Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
transition: opacity .3s linear;  /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}

(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.

A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.

Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.

Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.

Y eso es todo ver ejemplo en el footer de este blog

El acceso a la red con dispositivos móviles se dispara

El estudio de ComScore sobre el tercer trimestre del año (Julio a Septiembre) muestra que el acceso a las redes sociales en los cinco países líderes del mercado móvil (Francia, Alemania, Italia, España y Reino Unido) creció un 44%.

Click en la imagen para agrandar

Algo más de 55 millones de usuarios accedieron a redes sociales o blogs a través de sus móviles, ocupando España la segunda plaza con un 23,1% de usuarios con accesos desde dispositivos móviles.

Click en la imagen para agrandar

Ese mismo informa indica que las visitas a Twitter y LinkedIn aumentaron un 115% y un 114% respectivamente, en este mismo periodo.

Click en la imagen para agrandar

Casi tres de cada cuatro usuario en España declaro haber leído artículos de usuarios que conocían personalmente, y más del 60% actualizaron su estado a través de su dispositivo móvil. Un 44,2% aseguro leer artículos de organizaciones, marcas o eventos y un 41,1%leyeron artículos de personajes públicos o famosos. El 34,2% declaro haber recibido cupones, ofertas y descuentos en sus teléfonos a través de las redes sociales.

Click en la imagen para agrandar

A que nos dedicamos en la red

Flowtown ha publicado una infografía sobre a que nos dedicamos a la red abarcando seis grandes campos, que van desde el uso de redes sociales hasta la lectura de noticias, pasando por las compras online o las búsquedas.

Arrived. Aplicación IPhone para informar privadamente a tus amigos tu geolocalización

Arrived es una aplicación gratuita para IPhone, estilo Foursquare pero con algunas diferencias significativas, puedes seleccionar las zonas donde quiere que te geolocalizen, seleccionar los amigos que conocerán ese dato y es automática.

Solo debes seleccionar la zona y los amigos y al llegar al sitio la aplicación te hará un recordatorio para lanzar la informacón de forma automática.

Coloreando imágenes

"Entintar" una imagen, tiñéndola con un color es una idea de Impressive Webs y en su artículo, muestran varios métodos pero de tos ellos, me han gustado los dos que sólo requieren de CSS.

El primero es el que puede ser aplicado en cualquier navegador ya que sólo se permuta la opacidad y por lo tanto, podemos usar filtros en versiones inferiores a IE9.

La idea es sencilla, ponemos una imagen dentro de un DIV con cierta clase:

<div class="simpletint">
  <img src="URL_IMAGEN">
</div>

Y lo que haremos con CSS es colocar un color de fondo en el DIV y cambiar la opacidad cuando se coloque el cursor encima:

<style>
  .simpletint {
    cursor: pointer;
    display: inline-block;
    position: relative;
    -moz-transition: opacity .3s linear;  
    -webkit-transition: opacity .3s linear;  
    -o-transition: opacity .3s linear;  
    transition: opacity .3s linear;  
  }
  .simpletint:hover {
    background-color: #0FF;
    opacity: .5;
    filter:alpha(opacity=50);
  }
</style>

El segundo método hace lo inverso pero, en lugar de utilizar cambios de opacidad, utiliza colores semi-transparentes en formato rgba() y el pseudo-elemento before:

<div class="tint">
  <img src="URL_IMAGEN">
</div>

<style>
.tint {
    cursor: pointer;
    display: inline-block;
    position: relative;
  }
  .tint:before {
    background: rgba(0,255,255, 0.5);
    bottom: 0;  
    content: "";  
    display: block;  
    left: 0;  
    position: absolute;  
    right: 0;  
    top: 0;  
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
  }
  .tint:hover:before {
    background: none;
  }
</style>

¿Y si quiero tener una variedad de colores?

Quitamos el color de fondo de la clase tint y creamos otras:

.tint1:before {background: rgba(0,255,255, 0.5);}
.tint2:before {background: rgba(255,255,0, 0.5);}
.tint3:before {background: rgba(255,0,0, 0.5);}
.tint4:before {background: rgba(0,0,255, 0.5);}

<div class="tint tint1"> ....... </div>
<div class="tint tint2"> ....... </div>
<div class="tint tint3"> ....... </div>
<div class="tint tint4"> ....... </div>

Cómo implementar un motor de búsqueda personalizado integrado con AdSense

Google Custom Search es un servicio de Google con el que podrás crear un motor de búsqueda personalizado o "buscador para tu blog", cuentan con algunos temas o estilos disponibles para que puedas usar, y que puedes editar fácilmente para adaptarlos al diseño de tu blog, además, puedes integrar anuncios de AdSense en los resultados de búsqueda, para que puedas obtener ingresos por medio del programa.



Estos son los distintos temas que nos facilitan:

Es muy flexible, cuenta con nuevas opciones de presentación, y puedes elegir mostrar los resultados dentro del mismo blog, como sucede con el gadget de "Cuadro de Búsqueda" que tenemos en Blogger, en otra ventana o página de Google, etc.



Pero vayamos por partes, primero veamos como obtener un motor de búsqueda personalizado, para mostrar anuncios relevantes en los resultados de búsqueda y puedas tener ingresos.

Como crear un motor de búsqueda personalizado e integrar AdSense

Paso 1. Accede a tu cuenta de Adsense.



Paso 2. Haz click en las pestaña "Mis anuncios" y luego haz click en "Búsqueda":

Paso 3. Luego, haz click en el botón que dice: "Nuevo botón de búsqueda personalizado", y llena los campos que aparecen para tu nuevo motor de búsqueda y elige las opciones respectivamente:

Puedes configurar los estilos del anuncio, (fuentes y colores) agregar un logotipo, si por ejemplo vas a mostrar los resultados de búsqueda en una nueva ventana o página de Google, etc.



Paso 4. Una vez que hayas terminado, haz click en guardar y obtener el código.



Personalización 



Paso 5. Ingresa a las opciones de tu buscador, haciendo click sobre el nombre de este, dirígete al fondo de la página, y haz click donde dice: "Acceder a más funciones de Búsqueda Avanzada", de ese modo te presentará las opciones en español, si ya lo tienes así en AdSense.



Nota: También, puedes configurar tus motores de búsqueda que hayas creado, si vas directamente a Google Custom Search, accediendo en la opción que dice: manage your existing search engines.



Paso 6. En la columna lateral izquierda, haz click en Diseño.



Paso 7. Selecciona el Diseño que quieras tomando en cuenta el lugar donde colocarás el buscador y donde quieres que se muestren los resultados, y selecciona un tema o estilo de los seis disponibles el cual puedes cambiar a tu gusto, haciendo click "Personalizar".

Paso 8. Haz click en Guardar y obtener código, para luego pegarlo en un gadget eligiendo la opción HTML/Javascript.



Notas



Cuando utilizas el Diseño "Dos Columnas" te generará 2 códigos, uno es para que aparezca el buscador, y el otro para que se muestren los resultados de búsqueda, y este último, lo puedes poner agregando un gadget usando la opción HTMl/Javascript, y poniéndolo encima del main o columna principal (donde aparecen tus entradas), y es ahí donde se mostrarán los resultados de búsqueda.



En algunas plantillas puede ser necesario cambiar en el código del buscador el porcentaje de ancho que vienen como 100%, por 96% u otro menor, para que se vea completo.



Otro atajo es hacerlo desde Google Web Elements y tendrás que autorizar la conexión con AdSense.



Referencias: Google

Como lo ves yo no lo veré: "Las Resoluciones de Pantalla y tu Blog"

Cuando usamos un diseño fijo (fixed), es decir, aquel que usa medidas absolutas (en pixeles), es importante decidir que ancho del blog puede resultar más conveniente, pensando en que este pueda adaptarse de manera óptima a las distintas resoluciones de pantalla de nuestros usuarios.

Con ancho del Blog, como lo definen en las nuevas plantillas, se refieren a la envoltura del blog, donde se muestra el contenido de este, y con adaptarse óptimamente, nos referimos a que este pueda  leerse cómodamente en las distintas resoluciones de pantalla, sin que se vea afectada la estética o afecte el diseño.



Actualmente las nuevas plantillas, permiten ajustar el ancho desde el diseñador de plantillas, y el máximo que puede tener el blog es de 1500 pixeles, un ancho que pudiera ser "muy grande", considerando el promedio de lo que la mayoria de internautas usan, ya que no son la mayoría los que utilizan esa resolución de pantalla.



La consecuencia de eso, es ver blogs con anchos excesivos, en donde al superar la resolución de pantalla de un usuario, el contenido no se verá completo, y este tendrá que usar la barra de desplazamiento o scrollbar horizontal que aparecerá en la ventana del navegador, para verlo completo, lo cual, puede resultar incómodo para algunos, y hacerlo menos atractivo.



Entonces, para evitar eso, la gran pregunta sería: ¿Qué ancho del blog completo debería de usar?



Empecemos por conocer algunos informes que muestran las resoluciones de pantalla que usan los usuarios de Internet.

Estadísticas sobre las Distintas Resoluciones de Pantalla que usan los Internautas

El siguiente informe de StatCounter, reflejan los resultados de los últimos tres meses a partir de Agosto hasta Octubre del 2011, sobre las resoluciones de pantalla utilizadas en el mundo, basado en el análisis de tres millones de sitios que utilizan este servicio:

Fuente: StatCounter Global Stats - Screen Resolution Market Share





Este es otro informe de  W3Counter, otro servicio que ofrece estadísticas a sitios web, y que fué generado en octubre 31 del 2011, en donde se pueden ver las estadísticas basadas en las últimas 15,000 páginas vistas de cada sitio web, de un total de 52,112 sitios que utilizan W3Counter. En la página puedes ver el reporte de otros meses y años.

Resoluciones de Pantalla
1	1024x768	17.66%
2	1366x768	15.21%
3	1280x800	14.65%
4	1280x1024	8.19%
5	1440x900	6.97%
6	1920x1080	4.54%
7	1680x1050	4.17%
8	1600x900	3.10%
9	320x480	2.37%
10	1024x600	2.21%

Otro informe interesante es el de la W3school, que muestra las estadísticas generales en un periodo de 10 años del sitio, que aunque explican que no podría reflejar lo que la mayoría de internautas usan, si refleja las tendencias a largo plazo.

Fecha	Más alta	1024x768	800x600	640x480
Enero 2011	85%	14%	0%	0%
Enero 2010	76%	20%	1%	0%
Enero 2009	57%	36%	4%	0%
Enero 2008	38%	48%	8%	0%
Enero 2007	26%	54%	14%	0%
Enero 2006	17%	57%	20%	0%
Enero 2005	12%	53%	30%	0%
Enero 2004	10%	47%	37%	1%
Enero 2003	6%	40%	47%	2%
Enero 2002	6%	34%	52%	3%
Enero 2001	5%	29%	55%	6%
Enero 2000	4%	25%	56%	11%

Ver informe completo desde la página

En todos los informes podemos apreciar que aproximadamente entre el 14-21%,  utilizan resoluciones de 1024 pixeles de ancho, por lo que podría ser buena idea considerar esa resolución de pantalla en nuestro diseño ¿no lo crees?.



Aunque saber las resoluciones de pantalla más usadas en Internet puede ser de gran ayuda para tomarlo como referencia, el conocer ese dato basado en las propias estadísticas, puede ser muy útil y determinante para decidir que ancho voy a usar,  y optimizarlo tomando en cuenta esa resolución, de ese modo, el diseño estaría basado en una audiencia específica.



Personalmente me apoyo del hecho de saber que resoluciones de pantallas son las que más visitan mi blog. Si me lo preguntas, yo no usaría un ancho superior a los 1000 pixeles, pensando en que el diseño se vea bien a parir de una resolución de 1024 pixeles de ancho, aunque eso, ya es una decisión personal que deberías tomar, conociendo tus propias estadísticas, y por supuesto, asegurándote de ver como luce el blog en las distintas resoluciones más usadas.

¿Qué servicios pueden proporcionarnos información sobre la resolución de pantalla que usan nuestros usuarios en el blog?

• Google Analytics


• StatCounter


• W3Counter

...por mencionar algunos, solo abres una cuenta, y pegas el código de seguimiento que te proporcionan, para empezar a tener datos sobre las estadísticas. Ademas de ese dato, ofrecen otra información valiosa sobre las visitas de tu sitio web.

¿Cómo puedo probar mi blog blog en distintas resoluciones de pantalla?

Para saber como se ve tu blog en las distintas resoluciones de pantalla, y si usas Google Chrome, puedes usar esta extención, sino, puedes usar test size que es un servicio online que cumple bien ese propósito.



Conclusiones

Sin duda conocer las resolución de pantalla de nuestros usuarios, es crucial a la hora de decidir que ancho del blog se usará en un diseño fijo, para poder optimizarlo, por ello, es recomendable usar un servicio que nos proporcione ese dato para tomar una decisión más conveniente.