De la mano de la empresa española Sync, creadora de Zync, el sistema de posts patrocinados (y patrocinadora de esta entrada) se presenta Twync, el primer sistema de monetización en español para el canal social de un sitio web o personal, más precisamente para Twitter, por medio de tweets patrocinados.

Twync ofrece tres tipos de campañas:

1. Por tweet. Donde se paga una cantidad fija por cada tweet publicado.
2. Por click. Se pago por los click generados después de publicado el tweet.
3. Mercadillo. Los anunciantes abren ofertas a un precio por tweet o clic y el twitter selecciona el que le convenga.

Los puntos importantes para el twitter o tuitero:

• La repartición de las ganancias es 60% para el twitter y 40% para twync.
• El tweet a publicar es una opinión propia sobre el producto o servicio en cuestión.
• El twitter pone el precio por tweet o por clic.
• El twitter decide en que campaña participar.
• Métodos de pago: Paypal, moneybookers, cheque y adicionalmente, transferencia bancaria para España. El monto mínimo es de 20 euros.

Se nota la experiencia de sync en contenido patrocinado, quien ha realizado una plataforma más dinámica y sencilla de usar, abriendo nuevamente, un mercado que solo estaba disponible en inglés.

La inclusión del pago por clic es otra novedad, que puede ser ventajosa tanto para el anunciante como para el twitter, pues implicar traer una métrica más que aprovechada por los sistemas tradicionales y da más confianza en lo que se esta cobrando o pagando.

Sobre los tweets patrocinados en si, hay controversia, es un medio relativamente nuevo al que desde el inicio se acostumbro tener libre de publicidad, sin embargo, al final es uno canal más de distribución de contenido y como tal, un espacio para publicidad. Dependerá siempre del twitter la forma y magnitud de su explotación.

¿Qué opinas de este tipo de publicidad? ¿La usarías?

Sitio: twync.es

Nuevo paquete de iconos del equipo del blog de diseño Maquiladora de Sueños para Blog and Web. Son ocho iconos de servicios sociales con efecto 3D y un toque glossy en forma de una “manzana famosa”.

Los servicios incluidos son Facebook, Twitter, Feed RSS, YouTube, Vimeo, Flickr, MSN, y Skype.

Están en tres tamaños distintos: 64×64, 100×100 y 200×200 en PNG a buena calidad para escalarlos fácilmente. Tienen fondo transparente para adaptarse a cualquier diseño.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos, por favor, enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Apple Icon Pack.

En Blogger es posible crear también este tipo de fechas con un poco de javascript y agregando un par de cosas en la plantilla, de manera muy rápida.

Fechas amigables en Blogger

1. Entra al código de tu plantilla ( Escritorio → Diseño → Edición HTML → Expandir plantilla de artilugios ) y justo después del siguiente código:

]]></b:skin>

Añade el siguiente script:

<script type='text/javascript'>
/* Fechas amigables en Blogger: http://blogandweb.com/2784 */
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#039;semana&#039;]=604800;periods[&#039;d&amp;iacute;a&#039;]=86400;periods[&#039;hora&#039;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#039;string&#039;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#039;string&#039;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#039;&#039;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#039; &#039;;if(time&gt;1){output=output+period+&#039;s &#039;;}else{output=output+period+&#039; &#039;;}}
granularity--;if(granularity==0){break;}}
return&#039;Hace &#039;+output;}
$(document).ready(function(){});
</script>

2. Ahora busca:

<data:post.dateHeader/>

Nota: recuerda tener los artilugios expandidos o no encontraras este código.

Y sustitúyelo con:

<script type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

3. El último paso es cambiar el formato de fecha para que sea compatible con el script entra a: Escritorio → Configuración → Formato → Formato de cabecera de fecha. Y cambia el formato de fecha por el sexto de arriba hacia abajo, es tipo: 7/18/2010. Guarda los cambios.

Y listo. El resultado puedes verlo en nuestro demo.

Script para encontrar el tiempo entre dos fechas

Esta práctica función javascript se puede usar en cualquier otro desarrollo, y recibe como parámetros dos o una fecha. Si son dos fechas, obtendrá el tiempo entre ellas, si es una, obtendrá el tiempo de esa fecha a la actual.

function timeAgo(date1, date2, granularity){

	var self = this;

	periods = [];
	periods['semana'] = 604800;
	periods['día'] = 86400;
	periods['hora'] = 3600;
	periods['minuto'] = 60;
	periods['segundo'] = 1;

	if(!granularity){
		granularity = 5;
	}

	(typeof(date1) == 'string') ? date1 = new Date(date1).getTime() / 1000 : date1 = new Date().getTime() / 1000;
	(typeof(date2) == 'string') ? date2 = new Date(date2).getTime() / 1000 : date2 = new Date().getTime() / 1000;

	if(date1 > date2){
		difference = date1 - date2;
	}else{
		difference = date2 - date1;
	}

	output = '';

	for(var period in periods){
		var value = periods[period];

		if(difference >= value){
			time = Math.floor(difference / value);
			difference %= value;

			output = output +  time + ' ';

			if(time > 1){
				output = output + period + 's ';
			}else{
				output = output + period + ' ';
			}
		}

		granularity--;
		if(granularity == 0){
			break;
		}
	}

	return  'Hace ' + output;
}

Nota: Arriba,en la función para Blogger, el código se ha comprimido para que ocupe menos tiempo de carga.

La versión PHP de esta función la encuentras igualmente en el artículo "Fechas más amigables en WordPress".

Ulises Arvizu de Maquiladora de sueños nos sorprende con nuevo paquete de iconos exclusivos para Blog and Web, esta vez, son 3 geniales iconos para suscripción por Feed RSS, Twitter y Facebook en forma de cubos de rubik. Disponibles en tres tamaños distintos 32×39, 64×77 y 100×120 pixeles en calidad PNG-24.

Adicionalmente se incluye el archivo vectorial (fuente) para que puedas crear tu propios cubos rubik con otros servicios sociales o lo que se te ocurra.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Rubik Social Icons.

Servicios como Facebook o Twitter usan este formato y WordPress tiene una función sencilla para imprentarlo: human_time_diff().

Actualización: También puedes ver como hacer fechas amigables en Blogger

Fechas amigables en WordPress

Para usarla en los posts

Reemplaza la función que muestra la fecha en todos los archivos de tu theme por:

<?php echo 'Hace '.human_time_diff(get_the_time('U'), current_time('timestamp')); ?></a>

Las funciones que muestran la fecha en el post suelen ser: the_date(), get_the_date(), the_time() o the_modified_date() y suele encontrarse en los archivos: single.php, index.php, archive.php, search.php y page.php.

Para comentarios:

Reemplaza la función que muestra la fecha de los comentarios en el archivo comments.php o functions.php por:

<?php echo 'Hace '.human_time_diff(get_comment_time('U'), current_time('timestamp')); ?>

Y las funciones que suelen mostrar la fecha en los comentarios son: comment_date(), get_comment_date(), comment_time() y get_comment_time().

Con esto se habilitan las fechas relativas tanto en entradas como comentarios. En lo personal, solo lo implementé en single.php y functions.php, para comentarios.

Función PHP para obtener el tiempo entre dos fechas

La función que usa WordPress para mostrar el tiempo entre dos fechas en forma de texto es la siguiente:

function human_time_diff( $from, $to = '' ) {
    if ( empty($to) )
        $to = time();
    $diff = (int) abs($to - $from);
    if ($diff <= 3600) {
        $mins = round($diff / 60);
        if ($mins <= 1)
            $since = __('1 minuto');
        else
            $since = sprintf( __('%s minutos'), $mins);
    } else if (($diff <= 86400) && ($diff > 3600)) {
        $hours = round($diff / 3600);
        if ($hours <= 1)
            $since = __('1 hora');
        else
            $since = sprintf( __('%s horas'), $hours );
    } elseif ($diff >= 86400) {
        $days = round($diff / 86400);
        if ($days <= 1)
            $since = __('1 d&iacute;a');
        else
            $since = sprintf( __('%s d&iacute;as'), $days );
    }
    return $since;
}

Que puede usarse en cualquier otra aplicación PHP que recibe dos parámetros, correspondientes a las fechas de las que se desea conocer la diferencia en tiempo.

Características

• 3 Columnas.
• Menú con páginas estáticas.
• Configuración de colores desde el panel.
• Comentarios en el footer totalmente adaptados.
• Formulario en la misma página y excelente soporte de avatares.

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

1. Twitter

En el código de la plantilla (Inicio → Diseño → Edición de HTML) busca la siguiente URL:

http://twitter.com/btemplates

Y reemplázala con tu propia URL de twitter.

2. Menú

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

Licencia y condiciones de uso

Licenciado bajo Creative Commons Attribution-Share Alike 3.0. Uso en sitios personales y comerciales permitido dejando intactos los créditos de diseño (sin quitar o agregar enlaces en los créditos).

¿Cómo agregarlos?

Primero hay que activarlos en:

Escritorio → Diseño → Blog Posts → Editar

Si con esto no se muestran en tu blog, seguramente tienes una plantilla modificada, así que hay que agregar el código manualmente. En el código de tu plantilla (Escritorio → Diseño → Edición de HTML → Expandir plantilla de artilugios ), busca algo como lo siguiente:

<div class='post-footer-line post-footer-line-3'>

Nota: también puedes buscar por post-footer-line-2 o post-footer-line-1.

Justo después agrega el siguiente código:

<!-- Botones para compartir --><div class='post-share-buttons'><b:include data='post' name='shareButtons'/></div>

Te cuidado de que las etiquetas se abran y cierren correctamente, de otro modo, obtendrás un error.

Personalización

A partir de las clases que Blogger pone por defecto, es posible dar estilos a estos iconos y así personalizar su ubicación, dimensiones o cualquier otra propiedad con CSS. Las clases que agrega Blogger son:

.post-share-buttons {} /* Contenedor de los botones */
.share-button {} /* Aplicada a todos los botones */
.sb-email {} /* Botón para compartir por email */
.sb-blog {} /* Botón para compartir en un blog de Blogger */
.sb-twitter {} /* Botón para compartir en un Twitter */
.sb-facebook {} /* Botón para compartir en un Facebook */
.sb-buzz {} /* Botón para compartir en un Google Buzz */

Conclusión

Fieles a su costumbre, Blogger llega años tarde con características que sus usuarios ya usaban sin su ayuda. Me parece que la opción es completa, pues ofrece los servicios más usados por los usuarios: Facebook, Twitter y el correo electrónico. Este último, quizá es el mayor aporte de esta función, pues agrega una nueva página con un formulario fácil de usar, que además hace uso de los contactos guardados en GMail.

Características

• 2 o 3 Columnas.
• 3 zonas para gadgets.
• Cuadro de estatus de Twitter.
• Menú con páginas estáticas.
• Marcadores sociales en páginas individuales.
• Tipografía Lacuna Regular en títulos (javascript).
• Configuración de colores desde el panel.
• Bordes redondeados con imágenes (ya saben, por IE).

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

1. Twitter

En el código de la plantilla (Inicio → Diseño → Edición de HTML) busca la siguiente URL:

http://twitter.com/btemplates

Y reemplazarla con tu propia URL de twitter.

Ahora buscar:

btemplates.json

Y reemplazar btemplates con tu propio nombre de usuario en twitter.

2. Menú

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

Licencia y condiciones de uso

Licenciado bajo GPL Uso en sitios personales y comerciales permitido dejando intactos los créditos de diseño, iconos y vectores (sin quitar o agregar enlaces en los créditos).

¿Cómo funciona?

Stylish funciona con CSS, y al ser una extensión, funciona en los navegadores modernos, con lo que tenemos acceso a todas las ventajas de CSS 3. Con Stylish creas hojas de estilo locales, que te permiten modificar cualquier elemento de un sitio web.

Ejemplos de uso: borrar secciones que nunca se usan, eliminar publicidad, resaltar elementos importantes, cambiar el ancho de una columna, cambiar la paleta de colores y en general cualquier otra cosa dentro de las capacidades de CSS.

Paso a paso

1. Descarga e instala Sylish: Firefox | Chrome 

Reinicia tu navegador.

2. Ahora en el menú del navegador:

Firefox: Herramientas → Complementos → Estilos de usuario → Escribir un nuevo estilo.
Chrome: Opciones → Extensiones → Stylish → Opciones → Add new style.

Tendrás el botón para crear un nuevo estilo.

3. En esta nueva ventana se agrega el nombre del estilo, etiquetas y el campo de escritura, en este último irán todas las instrucciones CSS.

Seguro no se aplicaran estilos a todas la páginas que se visitan, por tanto, es importante definir dos tipos de estilo: generales y específicas a un dominio.

Estilos generales

Los estilos generales se aplican a todas las páginas que se visiten. Por ejemplo, la siguiente instrucción:

#ads {display:none;}

Borraría todos los elementos con id igual a "ads". Es poco recomendado pues en diferentes páginas un id podría tener funciones distintas y por lo tanto, estar eliminando posibles elementos útiles.

Estilos específicos por dominio

Para evitar afectar a todas las páginas por las que navegamos, se pueden crear estilos específicos a un dominio, la construcción del css puede ser como sigue:

@-moz-document url-prefix(http://www.sitio.com) { 

/* Estilos que solo afectaran al dominio www.sitio.com */ 

}

Es conveniente dar un vistazo a la documentación de stylish y a los selectores CSS 3 para sacar mayor provecho a esta extensión.

Ejemplos prácticos

Para hacer evidentes las ventajas de esta extensión, dejo a continuación algunos ejemplos para limpiar un poco la interfaz de Gmail, Twitter y Google Analytics, con explicaciones.

GMail

@-moz-document url-prefix(https://mail.google.com) {

.nH div.ps {display:none;} /* Borra los gagets en barra lateral. Por ejemplo, la de invitar a un amigo o el chat */
.k .diLZtc .nH .nH .mq {display:none;} /* Borra la barra de anuncios superior */
.ov .nH .mn {display:none;} /* Borra los "consejos" de uso de gmail en el footer */

}

Twitter

@-moz-document url-prefix(http://twitter.com) {

p.promotion {display:none;} /* Borra la apps recomendadas en la barra lateral */
.status-body .meta span:nth-child(2) {display:none;} /* Borra la aplicación desde donde se escribió cada tweet */
#footer {display:none;} /* Borra el footer */
#home .u-username {display:none;} /* Borra todos los tweets de un usuario "username" */
#home .share {display:none;} /* Borra todos los retweets automáticos de tu timeline */

}

Analytics

@-moz-document url-prefix(https://www.google.com/analytics) {

/* Limpia la interfaz de inicio de google analytics */
td.property_row, #footer, #CommonQuestions-ROOT, #ProductRecommendation-ROOT, ul.admin_lefthandside {display:none;}

}

También se puede consultar una biblioteca de estilos para muchos sitios en:

userstyles.org/stylish

Notas

Los estilos CSS no evitan que los elementos se carguen en la página, por lo tanto, no tienen ninguna ventaja respecto a la carga de la página; simplemente oculta elementos a nuestra vista. Si existe la opción de eliminar elementos desde el panel de una aplicación, esta será una mejor opción.

En estos momentos, la extensión de Firefox es más práctica que la de Chrome.

Conclusión

Stylish se ha vuelto una extensión necesaria en mi navegador, pues me permite limpiar mi área de trabajo y ocio en muchas aplicaciones web. Una interfaz limpia, quita muchos distractores.

El video fue grabado en Marzo del 2000 durante una conferencia en San Francisco, en él aparecen: Evan Willians, Meg Hourihan y Paul Bausch, creadores y programadores de Blogger.com.

En 2002 el código de Blogger fue reescrito, y para 2003, la plataforma completa fue vendida a Google Inc. Al momento de la venta, Blogger tenía 1.1 millones de usuarios registrados.

Evan Williams, uno de los fundadores, dejó Google en 2004, quien ese mismo año fundo Odeo, una plataforma de podcasting, la cual a su vez fue adquirida en 2007 por Sonic Mountain.

En Abril de 2007, Evan Willians cofundó Twitter, una herramienta de comunicación más de 50 millones de actualizaciones diarias por sus usuarios y de la cual sigue siendo CEO.

10 años después de la grabación del video, parecen escenas surrealistas, sin embargo, este es un inicio relativamente común en las grandes empresas de tecnología. Una idea, mucho trabajo y el doble de perseverancia.

Algunos datos curiosos:

• Blogger no fue concebido como un proyecto comercial, sino como una herramientas de publicación interna.
• La televisora Globo de Brasil fue la primera en comprar un licencia de "Blogger Pro" en 2002.
• Meg Hourihan fundadora de Pyra Labs, dejó de trabajar en servicios de internet en 2004 para trabajar en un restaurant en Massachusetts y actualmente solo se dedica a su familia.
• El video fue grabado por el diseñador puertorriqueño Alberto Gonzales, de ahí que se presentaran en español.

Fuentes y más información:

• Pyra Labs / Wikipedia.
• Blogger’s history re-imagined.
• Evan Willians blog.
• Meg Hourihan blog.