Consejos Blogger: abril 2013

martes, 30 de abril de 2013

Vintage Social Icon Set

Vintage Social es un set de íconos de redes sociales estilo vintage que podemos usar en nuestro blog o sitio web.

CARACTERÍSTICAS

Pack de 28 íconos estilo vintage de las principales redes sociales.
Autor : Iconstoc
Formato: PNG.
Tamaños: 128x128.

Descargar

domingo, 28 de abril de 2013

Redimensionar las imágenes de #GooglePlus mediante su URL

Hola queridos lectores, mil disculpas por ausentarme un poco pero los estudios me quitan bastante tiempo ¡Pero que mas da! ¡He vuelto!

plusone, imagenes

En el día de hoy, les traigo un simple truco que descubrí gracias a los nuevos enlaces de imágenes de Google+. Consta básicamente en modificar en el mismo enlace los valores de Width y Height para asi redimensionar la imagen, es bastante sencillo.

Por ejemplo en la siguiente imagen el tamaño real es de 400px X 200px.

Siendo este su enlace:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTN0xTSBWsIwCAi2or1VBQORf9eba8FxP6EmYvsRYpbXCEV3Edxq6Ta-PIAKlxwqMUD3ViMAylRhb2uVbLGihnj6QKvG5Y0vKWwPFO7MESwiK86unxJLtM35FfU8rqd44R0ln16Cmz7RyH/w400-h200/muestra.png

En donde lo destacado en "negro" son los valores que podemos modificar siendo w400 el ancho (width), y h200 el alto (height).

Entonces en el mismo enlace podríamos modificar los valores w300 X h100, y obtendríamos lo siguiente:

Enlace modificado:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTN0xTSBWsIwCAi2or1VBQORf9eba8FxP6EmYvsRYpbXCEV3Edxq6Ta-PIAKlxwqMUD3ViMAylRhb2uVbLGihnj6QKvG5Y0vKWwPFO7MESwiK86unxJLtM35FfU8rqd44R0ln16Cmz7RyH/w300-h100/muestra.png

Nota:

Solo las imágenes subidas desde Google+ pueden ser modificadas de esta manera.
Si subes una imagen desde Blogger, te entregara un enlace con otros parámetros no idénticos.

Widget para que te sigan y recomienden tu blog al final de las entradas + Bloque de publicidad de AdSense

¡Hola!, ¿qué tal? En una entrada anterior, te decía como agregar un widget para que sigan y recomienden tu contenido. Hubo un par de preguntas que coincidieron, donde me decían que querían poner este elemento al final de las entradas. Hoy te diré cómo hacerlo y además, pensando en aprovechar bien todos los espacios, agregaremos un bloque de publicidad de AdSense a un lado, pensando en que ya usas este programa de publicidad en tu blog.

La cajita para que sigan y recomienden tu contenido + el bloque de publicidad de AdSense se verá así:

Bloque de publicidad y cajita para que recomienden el blog

Todo esto aparecerá al ingresar a las entradas y esta estará al final del post, arriba del mensaje de los comentarios.

Puedes ver la cajita en acción, y cómo quedaría el bloque de publicidad (uso una imagen como ejemplo, ya que en ese blog, no puedo tener publicidad), en la demostración:

Demostración

Muy bien, pues ya sabiendo de lo que se trata, ahora veamos cómo lograrlo. Este tutorial a considerado como ejemplo para todos los pasos, las plantillas del diseñador de plantillas de Blogger.

Pasos

Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla, y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear-Restablecer copia de seguridad" y descargas la plantilla completa.

Primero, vas a la pestaña "Plantilla" del panel de Blogger, luego a: Personalizar > Avanzado > Añadir CSS, y ahí agregas el siguiente CSS:

/* Caja Redes */

ul#caja-redes{

width:275px;

padding:0;

margin:0;

list-style:none;

background:#f7f7f7;

border:1px solid #dcdcdc;

overflow:hidden;

}

ul#caja-redes strong, li.c-rss{

color:#848484;

font-size:12px;

}

ul#caja-redes li{

overflow:hidden;

}

li.cg-plus{

height:108px;

padding-bottom:6px;

border-right:1px solid #dcdcdc;

border-bottom:1px solid #dcdcdc;

margin:0 -1px 0 -5px;

}

li.c-fb{

border-bottom:1px solid #dcdcdc;

padding:8px 3px 2px;

margin:5px;

}

li.c-tw, li.c-mail{

margin:5px;

padding:6px 3px 0;

}

li.c-rss{

float:left;

margin:5px;

padding:0 4px 4px;

}

a.c-rss {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2c14hk33exbYBIkrR8WTVo1xAD22YjRp7y7q3L-_9Mvd3Ue_yYuKifRDpqTdErns3eOJ-eaquKFJEKSSGyFz7InTzUsQWJ_hbjPXE39Wf7pjoL_TX0bFqkWrLK6-yIoK5xm7qYfLyO0/s1600/rss1.png) no-repeat 25% 40%;

display:inline;

padding:0 0 1px 26px;

color:#848484;

}

input[type="text"].campo, input[type="submit"].enviar {

border:1px solid #dcdcdc;float:left;color:#848484;display:block; height:20px;font-size:11px;}

input[type="text"].campo{text-indent:3px;width:145px; margin-right:-3px;}

input[type="submit"].enviar {height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;

background:-webkit-linear-gradient(top,white,#d8d8d8);

background:-moz-linear-gradient(top,white,#d8d8d8);

background:-ms-linear-gradient(top,white,#d8d8d8);

background:-o-linear-gradient(top,white,#d8d8d8);

}

#seccionf{

width:560px; /*el ancho de los dos elementos + margen derecho de la cajita con botones*/

height:330px;

margin:0 0 14px 0; padding:0;

}

#misredes{

margin: 0 18px 0 0;

width:49%;

float:left;

}

#publi

width:49%;

float:right;

}

Deberás tomar en cuenta el ancho que tienes definido para los posts. La cajita + el bloque de publicidad + margenes deben ser igual o menor que el ancho que hay en la columna principal o main.

Luego, copia todo este código y ponlo en una nota de tu computadora, para que lo edites con tus datos. Debajo del código menciono cómo editarlo.

<ul id="caja-redes"><li class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fwww.compartidisimo.com&send=false&layout=standard&width=260&show_faces=false&font&colorscheme=light&action=like&height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </li> <li class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true" data-lang="es">Seguir a @compartidisimo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li> <li class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div>  <script type="text/javascript"> window.___gcfg = {lang: 'es'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </li> <li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </li> <li class="c-rss">O suscríbete por otras vías:<a class="c-rss" href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></li> </ul>
Edita los datos de arriba hacia abajo tomando en cuenta que en:
- www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo nombre_del_blog.blogspot.com, pensado que usas subdominio.
- compartidisimo ahí pones el nombre de usuario de Twittter.
- Seguir a @compartidisimo es el texto del botón de twitter.
- 109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador. Por ejemplo esta es la de mi página en Google+, y la numeración la he resaltado de rojo:
  
  https://plus.google.com/109627432877953314897/posts
- compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones.
- Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.
- compartidisimo otra vez pones la URI de FeedBurner.
- O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.
- compartidisimo ahí va de nuevo la URI de FeedBurner.

Luego, ingresa a tu cuenta de AdSense y crea un bloque de anuncios yendo a la pestaña de "Mis anuncios". Recuerda tomar nota del ancho disponible de la sección del post. Este, debe ser mayor al del bloque + el ancho de la cajita con las redes sociales + el margen, Yo usé un bloque de 250 x 250 pixeles en mi prueba.

Luego ve a esta página y convierte el código del anuncio que creaste.

Una vez editado el código de la cajita, y el código del anuncio, vas o poner todo junto como se indica:

<b:if cond='data:blog.pageType == "item"'>

<div id='seccionf'>

<div id='misredes'>

El código de la cajita del Paso 2

</div>

<div id='publi'>

El código del bloque con publicidad

</div>

</div>

</b:if>

Teniendo todo el código listo, vas a la pestaña "Plantilla", luego ingresas al editor en "Editar HTML", haces click en "Plantilla de formato", y presionas las teclas Ctrl + F, y ahí en el campo de búsqueda (search:) pegas la siguiente linea de código:

class='post-footer-line post-footer-line-3

Una vez localizada esa linea, te desplazas hacia abajo, y pega el código del paso 5 ya editado, antes de </b:includable> como puede apreciarse en la imagen arriba. De ese modo, la cajita quedará fuera de la sección llamada post-footer (donde normalmente están las etiquetas, botones para compartir, etc), aunque, dentro de los posts, al finas de los mismos.

Verifica en vista previa y si todo luce bien, guarda los cambios en "Guardar plantilla". Aunque no verás los elementos agregados, te asegurarás que todo luzca bien, por lo menos en la página principal.

¡Y listo!, habrás agregado la cajita para que te sigan y recomienden tu blog, y además un bloque de publicidad de AdSense ;)

Notas finales y + información sobre el programa de AdSense:

No agregues ningún texto arriba del bloque como "haga click", "te recomendamos que visites:" es decir, nada que incite a hacer click sobre el bloque de publicidad.

En una página sólo se puede mostrar tres bloques de anuncios.

Para obtener mas información sobre la creación de bloques de anuncios dirígete a esta página de Google.

También, puedes consultar las directrices de calidad para webmasters de AdSense, para informarte sobre las prácticas recomendadas del programa.

Botones CSS3 para Blogger (Exclusivos de Ayuda Bloggers)

Últimamente no he creado muchas cosas para sus blogs debido a la falta increíble de tiempo en la que me encuentro, así que para compensarlo he construído 4 tipos de botones para sus blogs, son libres de modificarlos a su antojo y distribuirlos.

Glossy:
Para estos botones usé la herramienta Gradient Editor de Colorzilla, transiciones, la transformación 2D translate y box-shadow.

Inicio Contacto Multimedia Proyectos

Código CSS:


.glossy-ayudabloggers {
color:#fff;
margin:10px;
padding:13px 8px;
background: rgb(184,225,252);
background: -moz-linear-gradient(top, rgba(184,225,252,1) 0%, rgba(169,210,243,1) 10%, rgba(144,186,228,1) 25%, rgba(144,188,234,1) 37%, rgba(144,191,240,1) 50%, rgba(107,168,229,1) 51%, rgba(162,218,245,1) 83%, rgba(189,243,253,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1)));
background: -webkit-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); 
background: -o-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);
background: -ms-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);
background: linear-gradient(to bottom, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 );
box-shadow:0 3px 0 rgba(37,141,200,1);
border-radius:5px;
text-shadow:0 1px 0 rgba(37,141,200,0.5);
display:inline-block;
border:none;
cursor:pointer;
}

.glossy-ayudabloggers:hover {
box-shadow:0 5px 0 rgba(37,141,200,1), inset 0 0 30px rgba(255,255,255,0.2);
-webkit-transform: translate(0, -2px);
-moz-transform: translate(0, -2px);
-o-transform: translate(0, -2px);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
text-decoration: none;
}

.glossy-ayudabloggers:focus, .glossy-ayudabloggers:active {
box-shadow:inset 0 2px 0 rgba(37,141,200,1);
-webkit-transform: translate(0, 2px);
-moz-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
-moz-transition: 0.1s;
-webkit-transition: 0.1s;
-o-transition:0.1s;
transition: 0.1s;
}

Método de uso:

<a href="URL_DESTINO" class="glossy-ayudabloggers">Nombre del enlace</a>

Flat:
Botones sencillos y planos, con transiciones. Útiles para plantillas simples:

Inicio Contacto Multimedia Proyectos

Código CSS:

.flat-ayudabloggers {
background:#e74c3c;
margin:10px;
color:#FFF;
padding:15px 8px;
border-radius:5px;
text-shadow:none;
display:inline-block;
border:none;
cursor:pointer;
}

.flat-ayudabloggers:hover {
background:#c0392b;
text-decoration: none;
}

.concreto {background:#95a5a6;}
.concreto:hover {background:#7f8c8d;}

.turquesa {background:#1abc9c;}
.turquesa:hover {background:#16a085;}

Método de Uso:

Nombre del enlace

Puedes modificar el valor concreto por turquesa para cambiar el color, o si quieres dejarlo por defecto simplemente borra el valor.

Si deseas crear tus propias configuraciones de colores, puedes ir a ColorCombos y elegir una combinación de colores tanto para el botón normal, como para el :hover. Botones de Ayuda Bloggers:
Estos son los botones que una vez creé para mi blog, utilizan box-shadow, text-shadow y gradientes:

Inicio Contacto Multimedia Proyectos

Código CSS:


.ayudabloggers-boton {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
background-color: #267cc2;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: #267cc2;
background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));
background-image: -webkit-linear-gradient( #42a5e1, #267cc2);
background-image: -moz-linear-gradient( #42a5e1, #267cc2);
background-image: -ms-linear-gradient( #42a5e1, #267cc2);
background-image: -o-linear-gradient( #42a5e1, #267cc2);
background-image: linear-gradient( #42a5e1, #267cc2);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}

.ayudabloggers-boton:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}

.ayudabloggers-boton:active, .ayudabloggers-boton:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19);
}

Método de Uso:

Nombre del enlace

Nota: Para la tipografía necesitas copiar el siguiente código arriba de </head>:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css' />

Botón descarga CSS3:
Un botón único que creé para un amigo, según el tipo de archivo debes configurar la imagen.

photo_albums.zip5.6mbDescargar

Código CSS:


.ab-download {
display:inline-block;
font-family:Arial;
background:#FCFCFC;
text-align:center;
border:1px solid #dadada;
box-shadow:0 2px 1px #dadada;
margin:30px 40px;
padding:15px;
border-radius:10px;
min-width:100px;
}

.ab-icon {
display:block;
width:90px;
height:90px;
margin:0 auto;
}

.ab-name {
color:#222;
font-style:italic;
}

.ab-size {
display:block;
padding:10px;
font-size:11px;
color:#888;
}

.download-message {
display:block;
margin:0 -30px;
cursor:pointer;
background:rgba(6,127,124,1);
background:linear-gradient(rgb(39,185,182), rgba(6,127,124,1));
box-shadow:0 2px 0 rgb(6,127,124);
text-align:center;
padding:15px;
color:white;
font-weight:bold;
}

.download-message:hover {
box-shadow: 0 0 4px rgba(6,127,124,0.4);
}


/*Tipos de archivo*/
.zip-file {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAmiOFYwSMY0ZLd57mpF4MtES6BrtMSYPLeqn58_czMMwyoEKFA4gOVicID0zqaQqs8eG6z7M5qVN51pFLOh8Zy58gCIl2egPMJ9lpDVQttD3TFSj087XqTEYKLv5Oj-q62pVeTV7-Hfs/s1600/1367207826_zip.png) no-repeat center;
}

Método de uso:


<div class="ab-download">
<span class="ab-icon zip-file"></span>
<span class="ab-name">photo_albums.zip</span>
<span class="ab-size">5.6mb</span>
<a href="URL_DESTINO" class="download-message">Descargar</a>
</div>

Para cambiar el ícono debes reemplazar zip-file por otro valor, pero antes debes crear las reglas CSS para cada tipo de archivo:

Primero, copia el siguiente código y pégalo en la zona CSS de tu plantilla:

.extensión-file {
background:url(URL_DE_LA_IMAGEN) no-repeat center;
}

Deberás reemplazar extensión por la extensión del archivo que quieras añadir, quedando así:

.doc-file {
background:url(URL_DE_LA_IMAGEN_DE_UN_ARCHIVO_CON_EXTENSIÓN_DOC) no-repeat center;
}

Y añadir una imagen en donde indica el código.

Si deseas utilizar un pack de iconos, te recomiendo este, utiliza las imágenes en 80x80 píxeles.

jueves, 25 de abril de 2013

Botón de leer mas para el stream de Google Plus en Blogger

Google Plus va adquiriendo cada vez mas preponderancia (yo al menos lo veo así) y debemos sacarle el máximo partido posible a sus posibilidades. Una de ellas es la posibilidad de interactuar en su stream, usando su API e insertando botones de llamadas a la acción (call to action) que pueden aumentar la efectividad de nuestras publicaciones en la plataforma.

Como ya hace tiempo que no os doy la vara con códigos os explico como hacerlo en Blogger por si queréis implementarlos en vuestros sitios.

.- El primer paso es darse de alta en la API de Google y crear un proyecto, en los servicios que os ofrece, seleccionar Google+ API (botón en on), aceptar los términos de servicio.

.- Una vez realizado el paso anterior, en la barra de la derecha pulsamos API Access y en la ventana que nos aparece pulsamos Create an OAuth 2.0 client ID...

.- Ahí rellenamos los datos, le ponemos un nombre (el que queramos) y en Home Page URL incluimos la url de nuestro sitio (importante poner las www si es como aparece en la pestaña del navegador la url de vuestro sitio).

Pulsamos next, seleccionamos Web application y en Your site or hostname (more options) incluimos de nuevo la url de nuestro sitio eligiendo (importante) http, no https, si no luego nos dará error (no olvidaros las www si las usáis). Pulsamos Create client ID

.- Ya tenemos creado nuestro acceso a la API y en la ventana que nos aparece es importante quedarnos con nuestro Client ID

Editamos nuestra plantilla de Blogger y antes de </body>

Y en vuestra plantilla, esto dependerá de cada plantilla y de donde queramos poner el botón pero como pista buscar footer1 por ejemplo y podéis insertar ahí el código que os indico a continuación

<button class='g-interactivepost' data-calltoactionlabel='READ_MORE' data-clientid='VUESTRO CLIENT ID COMPLETO (XXXXXXXXX.apps.googleusercontent.com)' data-cookiepolicy='single_host_origin' data-prefilltext='' expr:data-calltoactiondeeplinkid='data:post.url' expr:data-calltoactionurl='data:post.url' expr:data-contentdeeplinkid='data:post.url' expr:data-contenturl='data:post.url'>
TEXTO QUE APARECERA EN EL BOTON DEL BLOG
</button>

Con estos pasos cuando alguien pulsa el botón y comparta el contenido en Google Plus aparecerá un botón de Leer más en Google Plus. Aparentemente soporta el español como lengua pero aun no me ha dado tiempo a ver como implementarlo para que en vez de READ MORE aparezca LEER MAS, cuando lo mire, actualizare este post.

Luego el botón podéis customizarlo a vuestro gusto con CSS, así he dejado el mío

button {
float:right;
background: #304957;
margin: 10px;
padding: 10px;
color : #fff;
border: 0 !important;
cursor: pointer;
}

No solo podemos insertar un botón de Leer mas en el stream de Google Plus, hay muchas mas llamadas a la acción que podemos usar, y la base la tenéis reflejada en este post. Aun no he podido probarlo con Wordpress o Drupal pero solo se trata de modificar en el código la data de la URL dependiendo de como se denomina en cada plataforma.

miércoles, 24 de abril de 2013

Habilitar los nuevos comentarios de Google+ en plantillas modificadas de Blogger

De seguro ya muchos se habrán dado cuenta de la nueva característica de comentarios de Google+ en Blogger, y es muy seguro de que a muchos de los usuarios no les funcionen en plantillas modificadas, incluso configurando desde la sección Google+ desde el escritorio de Blogger.

En mi caso en particular, suprimí infinidad de elementos y comenté los scripts que cargan en el blog para poder tener la plantilla 100% validada en HTML5, por lo que usar las funciones por defecto no daban ningún resultado en mi blog.

Podemos usar un método alternativo genérico para cualquier página web, ya que este sistema no es exclusivo de Blogger. Para ello utilizaremos atributos con expr para poder transformarlos a nuestra plataforma:

Para plantillas HTML5:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script><div class="g-comments" expr:data-href="data:post.url" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" />

Para el contador de comentarios:

<div class="g-commentcount" expr:data-href="data:post.url" />

Si necesitas que tu plantilla esté 100% validada, podemos reemplazar:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script>

Por esto:

<script type='text/javascript'>
//<![CDATA[
 window.___gcfg = {lang: 'es'};
 (function() {
   var crearjsplus = document.createElement('script'); crearjsplus.type = 'text/javascript'; crearjsplus.async = true;
   crearjsplus.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(crearjsplus, s);
 })();
//]]>
</script>

Si usas una plantilla en XHTML no habrá problemas si usas los códigos anteriores, pero si por alguna razón se resiste el sistema a funcionar (Lo cual es casi imposible), puedes optar por la versión estándar:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script><g:comments expr:href="data:post.url" first_party_property="BLOGGER" view_type="FILTERED_POSTMOD" />

Para el contador de comentarios:

<g:commentcount expr:href="data:post.url" />

Nota: El código de los comentarios lo puedes incluir en donde gustes, si quieres añadirlo debajo de los comentarios normales, símplemente busca esta línea:

<b:includable id='comment-form' var='post'>

Y debajo añades el código.

Integración de la capa digital en las empresas, nivel digital

En la integración de las empresas al mundo digital y la implantación de su capa digital debemos de tener en cuenta un factor primordial, la evolución nunca es de manera inmediata, transcurre a lo largo del tiempo.

Recordemos que incorporar una empresa al mundo 2.0 no radica en abrirles cuatro páginas en redes sociales, emitir 10 tweets o publicar un post al día. Significa sobre todo abrirle nuevas oportunidades de negocio e incremento de resultados, además de conversación y comunicación. El mundo 2.0 al fin y al cabo lo que ofrece son nuevas herramientas y caminos para lograr mejores resultados.

Integrar empresas en el mundo 2.0 debe suponer para ellas una evolución y lo que no puede suponer nunca es una revolución. La capa digital supone en muchos casos remover profundamente los cimientos de una empresa, supone adaptarlas a los tiempos presentes y futuros.

Cuando eso ocurre, los profesionales deben valorar la capacidad de adaptación de esas empresas y plantear la integración de la capa digital a diferentes niveles y velocidades. Será básico conocer el nivel digital de la empresa en general y de sus componentes en particular. Esto permitirá adecuar el timeline de la implantación de dicha capa.

Por poner un ejemplo (puede parecer una exageración pero no lo es), si en una empresa su manejo de los ordenadores es básico ¿es conveniente abrirles cuentas en redes sociales? ¿la vas a subir a la nube? Si una empresa vende de manera tradicional y su nivel digital es bajo ¿es conveniente abrirles una tienda online?

Las empresas en su mayoría son reacias a cualquier cambio y una vez que los aceptan, no les deben suponer un problema esos cambios.

Con la implementación de la capa digital corremos el riesgo no solo de no conseguir resultados si no de generar una involución en las empresas. Ese riesgo no debe ser asumido nunca, la prudencia es otro factor añadido a estos niveles, mejor ser prudentes y trasladar en el tiempo esa evolución, el resultado final debe ajustarse a los objetivos fijados inicialmente, siendo el tiempo un factor secundario.

El proceso de la implantación, debe ser progresivo, teniendo en cuenta su nivel digital, adaptándose al nivel de aprendizaje de los individuos de las marcas.

No podemos pasar de ir en burro a manejar un cohete de golpe, el resultado más probable será estrellarse....

martes, 23 de abril de 2013

El futuro y la propiedad @supports

Así como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada @media que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada @supports, es probable que pronto se convierta en una de esas cosas imprescindibles.

Por ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en TRUE el valor layout.css.supports-rule.enable en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.

¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.

La sintaxis sería.

@supports una_condición {
  /* y aquí las reglas de estilo si la condición se cumple */
}

Por ejemplo, supongamos que quiero que una etiqueta tenga una animación que use @keyframes sólo si estas son soportadas y, caso contrario que no se vean:

#mi_animacion {display:none;} /* por defecto no lo muestro */
@supports (animation-name: un_ejemplo) {
  /* y sólo se verá si el navegador soporta animaciones */
  @keyframes un_ejemplo  {
    from {background-color:#000;border: 0px solid #444;} 
    to {background-color:#F00;border: 15px solid #FF0;}
  }
  #mi_animacion {
    display:block;}
    animation: un_ejemplo 1s infinite alternate;
  }
}

En ese caso, sólo hay una condición pero puede haber varias y combinarse con OR y AND:

@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {
  /* las reglas se aplicarían en cualquiera de los dos casos */
}

@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {
  /* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador */
}

O incluso, puede usarse el NOT para hacer lo contrario:

@supports not (display: flexbox) {
  /* estas reglas se aplicarían si la propeidad no es reconocida por el navegador */
}

Si bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):

@supports (background: red) {
  body {background: white;}
}

Sí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.

lunes, 22 de abril de 2013

Cómo obtener la primera imagen del post en Blogger sin Javascript

En Blogger hay una infinidad de etiquetas propias de la plataforma, entre las cuales existen las denominadas <data>. Estas tags nos permiten mostrar determinados elementos dentro de nuestro blog, y para nuestra ventaja podemos reubicarlas a nuestro antojo.

Por ejemplo, si deseamos mostrar el contenido de la entrada, símplemente recurrirmos a <data:post.body/>, o bien si necesitamos mostrar el título de ésta, añadimos <data:post.title/> a nuestro código. Para no desviarnos del objetivo principal de esta entrada, no nos adentraremos con detalles sobre el uso de estas etiquetas.

En Blogger también podemos obtener la imagen en miniatura de la entrada, pero sólamente la obtendremos a un tamaño de 72 píxeles. La etiqueta que se encarga de ello es <data:post.thumbnailUrl/>, y devuelve una URL en el siguiente formato:

http://X.bp.blogspot.com/-XXXXXXXXXXXXXXXXXX/s72-C/nombre-imagen.png

El valor s72 en la URL indica que la imagen tendrá un tamaño de 72 píxeles, mientras que el valor -C indica que la imagen se mostrará cortada en forma de cuadrado.

Aquí viene el problema, si intentamos aumentar el tamaño de la imagen mediante CSS, debido a su baja resolución se verá pixelada.

La solución:
Si estás utilizando la combinación <data:post.snippet/> y <data:post.thumbnailUrl/> (Para obtener el resúmen y la imagen en miniatura correspondientes), puedes optar entonces por utilizar <data:post.firstImageUrl/>, la cual devolverá la primera imagen de la entrada en su tamaño real.

Para utilizarla bastaría con incluir el siguiente código en tu plantilla:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>

Por ejemplo, si quieres que las entradas del índice se vean como una tarjeta:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class="entrada-indice">
        <a class="titulo-indice-post" expr:href="data:post.url">
           <data:post.title/>
       </a>
           <p class="resumen-post">
                <data:post.snippet/>
                <div style="clear:both" /> 
          </p>
     <img alt='thumb' class="miniatura" expr:src='data:post.firstImageUrl'/>
    </div>

<b:else/>
        <!-- Código original de la entrada, el cual se mostrará normalmente dentro de ellas y páginas estáticas -->
</b:if>

Lo que devolvería lo siguiente:

<div class="entrada-indice">
        <a class="titulo-indice-post" href="http://www.tublog.blogspot.com/2013/04/entrada.html">
          Soy el título de alguna entrada.
       </a>
           <p class="resumen-post">
                Soy un breve resúmen de la entrada que se muestra debajo de la imagen en miniatura.
                <div style="clear:both" /> 
          </p>
                <img alt='thumb' class="miniatura" src='URL-PRIMERA-IMAGEN'/> 
    </div>

En el caso del ejemplo, los selectores CSS serían los siguientes:

.entrada-indice {
/*Atributos para cada entrada dentro del índice*/  
}

.titulo-indice-post {
/*Atributos para el título de cada título*/  
display:block; /*Para pasar el enlace de inline a block*/ 
}

.resumen-post {
/*Atributos para el contenedor del resumen*/
}

.miniatura {
/*Atributos para la imagen*/ 
}

Dentro de cada selector deberás añadir las propiedades que creas convenientes para tu plantilla.

Nota: No es necesario reconstruir la sección completa, bastaría con buscar algo parecido a esto si ya utilizas el sistema que se encuentra en Oloblogger:

<img expr:src='data:post.thumbnailUrl'/>

Por esto:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>

domingo, 21 de abril de 2013

Los comentarios de Google+ en cualquier página

Por si a alguien le interesa, esto acaba de ser publicado en Google Operating System

Se trata de agregar los comentarios de Google+ a cualquier página de modo independiente.No es algo oficial así que ... prudencia:

<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
    data-href="url"
    data-width="642"
    data-first_party_property="BLOGGER"
    data-view_type="FILTERED_POSTMOD">
</div>

donde debe reemplazarse url por la dirección de la página.

En el caso de un blog, esa url es dinámica, varia y en Blogger sería algo así siempre y cuando el script se coloque dentro del includable post de manera similar a como se hace con otros plugins de redes sociales:

data-href="'<data:post.url/>'"

y, eventualmente, imagino que si se coloca en cualquier otra parte, podría usarse esto:

data-href=location.href;

El valor 642 de data-width es el ancho y deberán probar qué pasa si se cambia porque yo no pienso hacerlo.

A diferencia del sistema que propone Blogger, esto no sincroniza los comentarios sino que funcionan de manera independiente, algo similar a lo que se puede hacer con los comentarios de Facebook.

viernes, 19 de abril de 2013

jQuery 2.0: IE8 y cómo resolver problemas

Hace pocos meses, comentaba sobre las actualizaciones de la librería jQuery y de los recaudos que había que tomar si los implementábamos. Ahora, que ya está disponible la versión 2, todo lo dicho en ese momento sigue siendo válido pero, le debemos agregar un punto extra: la nueva librería NO es compatible con las versiones de Internet Explrorer anteriores a la 9.

Esto, no significa que funcionará mal significa que directamente: NO FUNCIONARÁ en IE8 por ejemplo porque los desarrolladores han dejado de dar soporte a ese navegador, ahorrando, de este modo, decenas de líneas de código.

¿Qué debemos tener en cuenta si es que utilizamos esta librería?

Primero que nada, sólo necesitamos una; es muy común ver que se cargan varias versiones porque se copian los códigos tal como se muestran en las páginas de ejemplo sin tener en cuenta que, cualquier cosa que agreguemos o querramos probar, debe pasar por el filtro del sentido común y tratar de entender qué estamos haciendo.

Por otro lado, si bien es fácil agregar la librería con algo así:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Esto, cargará siempre la última versión con lo cual, ciertas cosas que antes funcionaban, pueden dejar de funcionar.

La nueva versión ya está disponible en los repositorios de Google así que podemos usarla cambiando el número:

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

Ahora bien ¿Y que hacemos con IE8? Recuerden que jQuery 2 no funcionará en ese navegador.

Una alternativa es aprovecharse de los condicionales que inventó Microsoft para lidiar con estas cosas. Hay varios sitios que hablan sobre l tema e incluso el mismo blog de jQuery propone una alternativa pero, es completamente errónea así que, acá está la solución tal como define Impresive Webs y que funciona de manera correcta aunque el código parezca un poco absurdo.

<!--[if lt IE 9]>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<![endif]-->

<!--[if (gte IE 9) | (!IE)]><!-->  
  <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/>
<!--<![endif]-->

Lo que hará eso es cargar la versión 1.9.1. en Internet Explorer 8 o inferior y la versión 2 en cualquier otro navegador.

Si quieren verificarlo, el código está colocado tal cual en este mismo blog.

Vistoso slideshow con JavaScript

Hace un tiempo habíamos hablado sobre NivoSlider, un slideshow que podiamos implementar en nuestro blog y que tenía varios efectos.

Hoy implementaremos en nuestro blog otro slideshow igual de vistoso que no necesita librerías adicionales sino que sólo requiere JavaScript. Este slideshow tiene un ribbon y un efecto de transición bastante interesante.

( ↪DEMO)

Ahora veamos cómo agregarlo a nuestro blog:

1.§ Vamos a Plantilla - Edición de HTML.

2.§ Buscamos la etiqueta </head> y antes de éste, pegamos el siguiente script o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:

✵ Ver SCRIPT [+/-]

3.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 600px;
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pAcHiesGf4jAQVLsnCxTcmk5JIhyphenhyphenFnGvxT0LmVVIZV_MMfLeosqsg1dwQOc5rbb5eT2E2qeHUgmPj_LTaYf6zRx90GAr06w1Cei0nr0Cw9B5dSpaRcYU1M_8zR6s03HpkleeqklLxe2s/s1600/ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 600px;
height: 300px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrtywUIVyXip92abu38qu0ZvnXGvQe_TWI_i6KVhstXTrYbyZW7l3e8VYIQNyXgxxP_5lZ7_aOjAwdn_gNjRlxZK8McQMssTpo03rLjI7kmf7IUf2uzEogi6Pfh4meHZs06heKitb4NLl/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 330px;
left: 190px;
width: 150px;
background: none;
padding-left: 90px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2KhG4sJtkyud0DBEa-hUlSd7nalpT83FFmM1WrhRpNQllU5AmmWkftUrt40QR0fcBFlt72smfPOynmJniruS051et_452sI-lCu0_RAn7al_s18wquka8KgmaKCsEW70HtDtXDihR5fS/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0px -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

4.§ Finalmente, para agregar las imágenes del slide, armaremos el siguiente HTML en el lugar donde queramos agregarlo (debajo de la cabecera, antes del footer, etc) :

<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
</div></div>

5.§ Vamos a vista previa y si todo está bien le damos a Guardar.

jueves, 18 de abril de 2013

Comentarios, Google+, blogs y el final de una era

Seguramente, todos han recibido el mail de Blogger anunciando la integración de los comentarios de Google+ en Blogger; algo que permite sincronizar los comentarios entre ambos servicios. Los detalles (en inglés) y en español.

Dicen: "Este mensaje se ha enviado a porque nos indicaste que querías recibir avisos sobre las funciones nuevas de Blogger."

Pero, si en casi siete años, esta es la primera vez que envían un mail ... uno se pone a pensar ¡pucha!, se ve que este asuntito es algo que REALMENTE les interesa ¿A quién? ¿a mi? no, a Google.

Para algunos, es un sueño hecho realidad, para otros, entre quienes me incluyo, es la confirmación de eso que uno viene suponiendo hace tiempo: que Blogger terminará siento integrado, absorbido o deglutido por Google+ ya que estamos en tiempos de redes sociales

Los blogs fueron la explosión de la participación activa pero, al parecer, ahora, cuando ya no nos quedan muchas palabras, le llegó el turno al micro-blogging y a las redes sociales, ese "cruce entre patio andaluz con sus cotilleos y foro romano" o "una fuente de información para poder crear un medio o apoyar uno ya existe".

Todo el mundo ama a Google ... hasta que es demasiado grande. Demasiado poder para alguien aunque sea un angelito sin malas intenciones.

Llegó Google+ y algunos se enamoraron, a otros les resulta indiferente. Si es bueno, si es malo, si es lindo, si es feo, si es mejor o peor que otro servicio carece de importancia. Habrá quien lo use para esto y otro para aquello. Habrá quién lo use mucho y habrá quien lo use menos. Cada cual atenderá su juego como pueda.

Pero que nadie se olvide que no hay monopolios buenos y monopolios malos. Todos son malos. El gran imperio de la web tiene muchos pretendientes al trono y la verdad, como soy un simple mortal, andar levantando tal o cual bandera para que otro se llene los bolsillos me parece una tremenda estupidez.

Distopía: utopía perversa donde la realidad transcurre en términos opuestos a los de una sociedad ideal, es decir, en una sociedad opresiva, totalitaria o indeseable. El término fue acuñado como antónimo de utopía y se usa principalmente para hacer referencia a una sociedad ficticia frecuentemente emplazada en el futuro cercano en donde las tendencias sociales se llevan a extremos apocalípticos.

Seguir a alguien no es estar junto a alguien, es ir detrás.

Creo que la idea de la web es otra: es ir juntos y no en fila india. Creo que la idea de la web es ir para cualquier lado y encontrarse con otros en el camino, sin tratar de venderles nada.

miércoles, 17 de abril de 2013

Capa digital, la integración del mundo offline y online para las empresas

En estos últimos años hemos vivido la explosión de los blogs y más tarde de las redes sociales, en un principio solo afecto a los usuarios pero desde hace un par de años esto también ha alcanzado a las marcas. Eso abrió un nuevo mercado para ambos, usuarios y marcas, por un lado un mercado laboral cuya demanda de profesionales es cada vez mayor y por otro lado las marcas se han dado cuenta que se encuentran ante una nueva forma de comunicación con sus potenciales clientes y por lo tanto una oportunidad de negocio.

Hasta aquí el enfoque, pero dejando a un lado el mercado laboral, lo que uno observa es que la necesidades reales de las marcas no quedan cubiertas con lo que hasta ahora se es ha ofrecido (hablo en términos generales), se les habla de nuevo modelo de comunicación con potenciales clientes, mayor alcance, menores costes, incluso de ROI pero no en términos que ellas entiendan. No nos engañemos las empresas lo que quieren en la mayoría de los casos es vender mas y eso es complicado, muy complicado, hacerlo abriendo un blog o teniendo cuentas en redes sociales.

Si analizamos el nicho, la mayoría de los profesionales que están en el se encuentran en una zona de confort, ofreciendo los servicios que dominan. Cosa lógica por otra parte, es complicado que en un nuevo nicho de mercado de apenas dos o tres años haya profesionales con gran experiencia. Pero la pregunta es ¿son esos servicios que ofrecen suficientes para contentar a las marcas? Mi respuesta es que no.

La semana pasada pase varios días con los compañeros de Walnuters, mantuve interesantes charlas sobre el tema con Evaristo Nogales y Alberto Luque, ambos con su experiencia, me expusieron su visión de como integrar esos dos mundos, el offline y el online. Dos mundos hasta ahora casi paralelos por que en definitiva no acaban de satisfacer plenamente al principal actor (cuando hablamos de mercado) que son las marcas.

En esas conversaciones en ningún momento hablamos de sitios webs, redes sociales, comunicación, etc, se hablo del concepto que ellos han denominado Capa Digital, de la inclusión de esa capa digital en los negocios que debe permitirles evolucionar y al final alcanzar sus objetivos. Esta capa digital es la que se necesita para adecuar a las marcas a los tiempos que corren, es la que usando las herramientas disponibles en la red, les puede incluso redefinir su negocio, cambiar su visión/misión, reconvertir sus productos e incluso generar nuevos.

Evidentemente estamos hablando de que es complicado plantear esta capa digital a las marcas por que supone que deben abrirte las puertas del negocio de par en par e incluso llegar a que formes parte de su estructura pero el camino debe ser ese, es el nuevo marketing digital. Evaristo expuso ayer ampliamente el concepto en un post que recomiendo que leáis.

Con esta nueva visión de como integrar el offline y el online para obtener resultados que agraden a las marcas esta claro que el mercado laboral va a necesitar de equipos multidisciplinares que sepan integrarse en las empresas y ofrecer las mejores soluciones posibles.

¿estamos ante un nuevo modelo de negocio? yo creo que si....

lunes, 15 de abril de 2013

jFontSize: Manejar el tamaño de los textos

Hay muchos scripts que hacen lo mismo que jFontSize pero este es bastante simple ya que usa la librería jQuery.

En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.

El script es muy pequeño y puede descargarse desde la web del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el plugin (es raro pero es así) entonces, lo mejor, es descargar el zip con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js

Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:

<style>
  .jfontsize-button {
    background-color: #EEE;
    border-radius: 4px;
    box-shadow: 0 0 0.2em #888 inset;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    margin: 0 1px;
    opacity: 0.8;
    padding: 0.3em 0;
    text-align: center;
    text-decoration: none;
    width: 2em;
  }
  .jfontsize-button:hover {
    opacity: 1;
  }
  .jfontsize-disabled, .jfontsize-disabled:hover {
    opacity: .5;
    pointer-events: none;
  }
<style>

Y de manera genérica, lo ejecutamos de este modo:

$(document).ready(function() {
  $('#nombreID').jfontsize();
  // o bien esto otro si queremos hacer referencia a la clase
  $('.nombreCLASE').jfontsize();
})

Donde nombreID o nombreCLASE deben indicar la etiqueta sobre la que funcionará, teneindo en cuenta que esa etiqueta debe tener una regla de estilo con un tamaño de fuente ya sea específico o heredada de su contenedor. Por ejemplo, si quisiéramos aplicarlo a todas las entradas de este blog, debería usar algo así:

$('.post-body').jfontsize();

ya que los textos se encuentran en un DIV con esa clase sin embargo, si dentro de esa etiqueta, hay otras que especifican un tamaño, estas no se verán afectadas; veamos un ejemplo concreto:

<div id="demojfontsize">
  <div style="text-align:right;">
    <a id="jf1-b1" class="jfontsize-button" href="#">A-</a>
    <a id="jf1-b2" class="jfontsize-button" href="#">A</a>
    <a id="jf1-b3" class="jfontsize-button" href="#">A+</a>
  </div>
  ... un texto cualquiera ...
  <span style="color:#FF0; font-family:cursive; font-size:20px;">otra fuente y otro tamaño</span>
  ... un texto cualquiera ...
</div>

si el script lo ejecutamos así:

$('#demojfontsize').jfontsize({
  btnMinusClasseId: '#jf1-b1',
  btnDefaultClasseId: '#jf1-b2',
  btnPlusClasseId: '#jf1-b3'
});

veríamos algo como esto:

A-A A+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pulvinar mauris ac purus lobortis et dapibus libero facilisis. Praesent consectetur odio et massa congue mollis nec non turpis. Morbi in leo in est congue lobortis sed et enim.
otra fuente y otro tamaño
Praesent hendrerit risus vel velit eleifend ornare. Ut eu metus elit. Nullam sollicitudin, quam at dictum tristique, odio nunc vestibulum nibh, vel molestie erat eros eu metus. Fusce leo purus, venenatis ut adipiscing ut, placerat rutrum ligula. Maecenas pellentesque posuere arcu nec sagittis? Pellentesque feugiat dignissim risus, id laoreet lectus pulvinar id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tincidunt mi in erat lobortis egestas. Integer lacus odio, tincidunt quis ullamcorper non, adipiscing aliquam nibh. Sed bibendum turpis aliquet purus dignissim fringilla.

Los botones A- y A+ aumentarán o disminuirán el tamaño del texto y el botón A central restaurará el tamaño a su valor original pero, nada de eso afectaría el span de color amarillo ya que en la etiqueta, el tamaño del texto es explícito porque se encuentra en un atributo style o está definido en alguna otra regla.

La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:

btnMinusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño
btnPlusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño
sizeChange es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles

Si el script dijera esto:

$('#demojfontsize2').jfontsize({
  btnMinusClasseId: '#jf2-b1',
  btnDefaultClasseId: '#jf2-b2',
  btnPlusClasseId: '#jf2-b3',
  btnMinusMaxHits: 5,
  btnPlusMaxHits: 5,
  sizeChange: 1
});

Habría un máximo de cinco clicks disponibles y al llegar a ese límite, el botón se deshabilitaría.

A-A A+

Para usarlo en distintas etiquetas de la misma página, debemos indicar al script, el ID o la clase de los botones que es lo que hacemos con estas opciones:

btnMinusClasseId es el ID o clase del botón decrementar
btnDeafultClasseId es el ID o clase del botón incrementar
btnPlusClasseId es el ID o clase del botón restaurar