Chica Blogger

Twitter Venn es una aplicación para Twitter que muestra relaciones entre diversos temas tratados por los usuarios durante el día, en un diagrama de Venn. Tiene prácticamente la misma utilidad que TweetScan, el buscador especializado de tweets, pero es más gráfico.

Ingresando dos o tres palabras, separadas por comas, Twitter Venn nos muestra el número de tweets relativos a una palabra determinada, y los puntos de intersección con otro conjunto de tweets. Pinchando en un punto o un conjunto, además podemos ver tweets específicos rotatorios.

La utilidad de Twitter Venn no está precisamente en saber lo que hablan otros twitteros, sino en que puede llegar a ser una últil herramienta para generar insights que lleven a nuevos posts, o un invaluable escaparate de recursos que comparten otros usuarios a través de sus links. Así, por ejemplo, mediante un enlace llegué a estos simpáticos íconos festivos, que forman parte de un pack diseñado por NClud.

Enlace: Twitter Venn | Visto en: Startup Meme

Smashing Magazine nos presenta tres sets de íconos navideños muy creativos diseñados por SoftFacade, Dellustrations y Paddy Donelly, quizás de los últimos que veamos antes de Navidad. En total, son 38 íconos gratuitos en formato png y otros, en distintos tamaños. Estos íconos pueden ser usados en proyectos personales sin restricción, y también en proyectos comerciales privados.

No soy fanática de Smashing Magazine, pero estos íconos me parecen más que meritorios de ser compartidos, en especial si pensamos que hay diseñadores independientes detrás.

Enlace para la descarga | Smashing Christmas Icon Sets

Usualmente, los menús son creados con varias imágenes, lo que hace algo más complicada la codificación y la carga de un sitio. Pero Kailoon de Loon Design nos enseña a crear estéticos menús de botones utilizando sólo una imagen, que pueden ser fácilmente añadidos a un blog.

Para un menú de botones, podemos usar una de las siguientes imágenes que creó Kailoon, o crear las propias que puedan ser cortadas en dos partes equivalentes.

La estrategia es la siguiente:

Se trata simplemente de añadir < span/ > en el link. Así, una parte del botón va a estar dada por el span, y otra por el link.

Demo original – Demo en Blogger.

El código

CSS: Pegar antes de ]]>< /b:skin >

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

HTML: Pegar después de header-wrapper.

<ul class='menu'>
<li><a class='current' href='#' title='home'><span></span>home</a></li>
<li><a href='#' title='products'><span/>products</a></li>
<li><a href='#' title='blog'><span/>blog</a></li>
<li><a href='#' title='contact'><span/>contact</a></li>
</ul>

Cambiar los títulos de cada sección, y el nombre que queremos que tenga cada botón, y reemplazar # por el link de la sección correspondiente.

Alternativa

También podemos hacer una leve modificación en el código CSS, para utilizar botones de dos colores (Ver demo):

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #527C27;
	padding: 4px 15px 0 0;
	margin-right: 7px;
        background: url(http://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top right;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
        background: url(http://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top left;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

Todas las imágenes están almacenadas en Blogger. Adapté el tutorial a Blogger para probarlo yo misma y darle una mejor utilidad. Sin embargo, el menú puede ser añadido a cualquier plataforma que permita la edición de HTML.
El packete original con imágenes y el archivo *.psd del menú pueden ser descargados desde el blog de Kailoon (ver link arriba).

No es difícil hacerse adicto/a a Twitter. Quienes lo usamos, podemos gastar (o invertir, según el cristal con el que se mire) una cantidad considerable de tiempo en él.

¿Cuánto tiempo has gastado en Twitter? Tweetwasters permite dar respuesta a esta sencilla pregunta sólo con ingresar nuestro nombre de usuario de Twitter.  El sistema calcula el tiempo que has gastado en Twitter en base al número de tweets que tengas, más o menos así:

Tweets x 0,5 : 60 = Tiempo que has pasado Twitteando (en horas).

* 0,5 son los minutos que gastas en cada Tweet, o sea, aproximadamente 30 segundos.

Junto con ese cálculo, Tweetwasters nos entrega un “indicador” de nuestra adicción a Twitter. En mi caso, con alrededor de 300 tweets y unas 3 horas de tiempo gastado, me pregunta si estoy segura de que estoy usando bien Twitter, o si sé que Twitter es la gran revolución de las redes sociales.

¿Y tú, cuánto tiempo has pasado twitteando? ¿Has gastado segundos, minutos, horas, días… semanas? Increíblemente, hay gente que ha pasado alrededor de un mes de su vida twitteando (puedes ver el Hall de la Fama).

Enlace: TweetWasters | Visto en: Tweetcrunch

Aquí, dos sitios para crear en pocos segundos firmas para promocionar nuestra cuenta Twitter en foros, firmas de e-mail o incluso en nuestro blog:

Twignature

Aunque la web está en japonés, puede usarse intuitivamente para crear una pequeña firma en dos simples pasos: (1) introducir tu nombre de usuario; (2) seleccionar el tipo y tamaño de la firma que queremos. Hay tres tipos de firma levemente distintos, cuyo tamaño puede variar de acuerdo al largo de nuestro nickname:

Lo rescatable del sitio, es que entrega el código con la imagen y un enlace a nuestra cuenta Twitter, listo para poner en un foro que soporte HTML en las firmas. Para BBCode, sería algo así: [url=cuentatwitter][img]urldelaimagen[/img][/url]

Enlace: Twignature

TweetBars

Sólo con ingresar nuestro nombre de usuario de Twitter, nos proporciona una barra dinámica como la siguiente, que muestra nuestra última actualización:

Luego, sólo es cosa de copiar el código HTML o BBCode donde queramos. La única desventaja que tiene, es que el reemplazar el enlace a TweetBars por el nuestro hace que la firma se vuelva estática, por lo cual no es recomendable.

Enlace: TweetBars | Visto en: Killer Startups