Tileabl.es es un nuevo sitio donde podrás encontrar Packs de Patterns 100% semaless para que las apliques. De momento el sitio cuenta con cuatro Packs de Patterns, pero con el correr de los días se irán sumando otras colecciones.

Cada pack incluye los archivos necesarios para poder modificar las Patterns (source file) y el archivo .PAT para trabajar en Photoshop.

Estos archivos son 100% FREE y podes usarlos en proyectos personales y comerciales libre de licencias, si te gusta lo usas, no importa de que forma; simple y sin restricciones.

Este pequeño script (jQuery de por medio) le permitirá a tus usuarios enviar un Tweet directamente desde tu sitio conectándose mediante @anywhere. Al acceder click sobre un elemento asignado se abrirá el box donde podrán enviar el Tweet de una manera elegante y con bastantes opciones a la hora de personalizar el mensaje.

Una de sus ventajas, es que no se requiere como en otros casos contar un API key propio ya que utilizamos el de aplicación y tampoco necesitas descargar ningún archivo ya que se trabaja de manera online siempre.

Instalación y uso

En tu header es necesario hacer el llamado al script

<script type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js"></script>

Ahora solo necesitamos configurar Like it? Tweet it! e inicializar

<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt();
	})
</script>

Por supuesto necesitamos un elemento al cual hacemos el llamado en nuestro HTML

<p class="tweet-this"><a href="javascript://">Like it? Tweet it!</a></p>

Por defecto el script generara un shortlink único para cada entrada que sera guardado en el servidor de los creadores de este script para evitar generar un nuevo link corto por cada visita a la pagina. Si esto nos convence, también se puede especificar nuestro propio shortlink e indicar que se utilice ese en su lugar.

En cuanto a la personalización, el script cuenta con una documentación muy extensa y clara para lograr una buena interacción con sitio, podemos configurar casi al 100% el script, desde los títulos hasta el mismo estilo CSS mediante.

Por ejemplo estas son algunas de las opciones que seguramente te gustaría personalizar:

<script type="text/javascript">
$(document).ready(function(){
		$(".tweet-this a").tweetIt({
			animate: "fade", //Animacion del box
			header: "Tweetea esta entrada",//Titulo del box
			typeATweet: "Tu Tweet aqui",//Texto a modo de intro en el Tweet
			closeButton: "Cancelar el Tweet",//cancelar
			emptyConfirm: "Estas seguro de enviar el Tweet solo con el link?",//mensaje en caso de que no se introdusca texto
			youare: "Hola,",//Bienvenida
			findingLink: "Buscando el link",//Buscando...
			intro: "Comparti esta entrada con el resto del mundo",//Subheader en el box
			notConnected: "Necesitas conectar para enviar el Tweet"//Mensaje si el lector no esta conectado
		});
	})
</script>

Y por ultimo, pero no menos importante contamos con un plugin para WordPress junto con la documentación necesaria para integrar Like it? Tweet it! en Tumblr y Blogger.

Una de las características mas remarcables, es el hecho de que este reproductor sea 100% Open Source y 100% Free y sea capaz de servir todos los formatos soportados por HTML5: ogg, mp4, acc, etc. junto con listas de reproducción e integracion con Youtube y Vimeo.

En caso de que el visitante no cuente con un Navegador compatible con esta tecnología, se nos ofrece la posibilidad de servir como alternativa un contenido en flash, para así no dejar a nadie atrás. Por el momento se cuenta con un modulo para Drupal, y con perspectivas a futuro de contar con plugin para WordPress y Joomla.

Por ultimo, es posible personalizar el reproductor para adaptarlo a nuestro diseño, dado que como ya lo mencione, OSM Player esta basado en jQuery y mediante jQuery-UI es muy sencillo lograr nuestro propio skin.

Como IE directamente no reconoce estos nuevos elementos (EJ: <section> o <article> que se utilizan en HTML5, mejor dicho, los reconoce pero no es capaz de cerrar cada elemento, por lo cual siempre quedan “vacios”. IE Print Protector brinda el soporte necesario para renderizar estos nuevos elementos tanto en la pantalla como cuando nos trasladamos al papel.

Cuando estamos trabajando con la pantalla, IE Print Protector utiliza el script mencionado en el principio, ahora cuando se trata del papel el script comienza a hacer su trabajo. En lugar de utilizar los nuevos elementos, lo que hace es reemplazarlos por digamos, con un DIV o un SPAM; para lograr una impresión perfecta, creando una nueva hoja de estilos tomando como base la hoja original.

Si todavía no estas muy seguro si vale la pena implementar este script, te sugiero que veas el Demo donde se compara una hoja de impresión con el script implementado y otra pagina sin la implementación. Las diferencias, por lo que aclare más arriba son abismales.

Como siempre lo digo, cuando se habla de usabilidad se habla de diseñar y armar pensando en el usuario final, nosotros podemos navegar y disponer de un sistema moderno y que sigue los estándares, pero los usuarios, puede que no. En definitiva lo que se trata (y siempre tiene que se así) es hacer que la experiencia del usuario sea de lo mas amigable posible.

La plataforma se ha lanzado oficialmente hace unas horas, y ya contamos con una buena documentación algunos ejemplos para que nos pongamos a trabajar.

Primeros pasos

Lo primero que necesitaras sera crear una nueva aplicación, por lo que te tendrás que loguearte con tus credenciales de Twitter y obtener tu acreditación. Una vez hecho esto, es necesario crear una aplicación, para este caso vamos a crear una aplicación Web para interactuar con Twitter dentro de nuestro Blog.

Cuando nuestra aplicación haya sido aprobada, se nos proporcionara una API Key y una versión de Anywhere. Estos datos son privados y muy sensibles, no los comportas.

Para poder comenzar a interactuar vamos a necesitar introducir dentro de las etiquetas header el script de Anywhere:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Anywhere Sample</title>
    <script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>
  </head>
  <body>
    ...
  </body>
</html>

YourAPIKey es obviamente la Key que se ta proporcionado con anterioridad.

Auto-linkification

Esta función nos permite “auto-linkear” a un perfil de Twitter cada vez que mencionemos a este usuario.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter.linkifyUsers();
  };
</script>

Esta función busca dentro del DOM e intenta coincidir usuarios con sus respectivos perfiles.Por razones obvias no se “linkeara” a usuario si estos están dentro de algunas etiquetas especiales, como ser A, SCRIPT, NOSCRIPT, etc.

El proceso es bastante rápido, solo demora entre 150-200ms en hallar las coincidencias.

Cada link incluye por defecto la class="twitter-anywhere-user" Si necesitamos añadir una class especial a cada link que se ha creado, solo debemos crearla.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter("#linkify-this-content").linkifyUsers({
      className: 'my-tweep'
    });
  };
</script>

Dentro del container linkify-this-content se creara una clase llamada my-tweep que reemplazara a las class por defecto anteriormente mencionada.

Hovercards

Esta es una de las funcionales mas amistosas y esperadas. Es la inserción de un pequeño Tooltip desde donde podemos ver un poco de info sobre este usuario, hacer un Following o unfollowing y demás.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter.hovercards();
  };
</script>

Por ejemplo, Puedo decir: Anoche esta leyendo mis mensajes en mi @blackberry y encontré varios de @baires.

Hovercards entra en conflicto con la funcionalidad Auto-linkification, de tener las dos funciones habilitadas Hovercards tendrá prioridad. Para usar las dos funciones al mismo tiempo solo debemos indicar una nueva class para el link al usuario en alguna función. Tal como lo explique más arriba.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    twitter("#main-content a.my-tweep").hovercards();
  };
</script>

Aquí estaremos indicando que solo se crearan Tooltips para los usuarios que se encuentren dentro del container main-content y con la class my-tweet en su respectivo anchor.

Follow buttons

Otra opción interesante para tener en cuenta. Nos permite añadir un botón donde mediante una ventana de por medio el usuario puede hacer un Follow dentro de nuestro Blog, sin tener que salir alguna vez de él. Por ejemplo con este boton me podrás seguir en Twitter:

Seguime

El botón es inteligente, por lo cual si ya estas siguiendo a @baires en teoría te tendría que avisar, aunque en la practica pareciera que no funciona asi.

<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter('#follow-twitterapi').followButton("twitterapi");
  };
</script>

Y ahora solo mencionamos el elemento:

<div id="follow-twitterapi"></div>

Consideraciones Finales.

Estos son tres ejemplo simples y básicos de lo que se puede hacer con @Anywhere. Dentro de la documentación encontraras algunos ejemplos más, así como también una serie de recomendaciones y manuales de como integrar esta plataforma con tus Apps.

ValidForm Builder genera formularios XHTML validos lo que es un gran punto a su favor. La validación de datos es inline, por lo cual las Pop-Up son dejadas de lado. Gracias a us API podes crear desde el formulario de contacto mas simple hasta un formulario de registro bien robusto.

Por ultimo la librería soporta todos los tipos de inputs conocidos, como ser textbox, checkbox, radio, etc.

Si el visitante utiliza un navegador no soportado para el tag <video>, el plugin reemplazara el tag por el reproductor Flowplayer, logrando así una consistencia en todos los navegadores.

Este plugin soporta los formatos MP4, utilizando el codec h.264 y el OGV a través del codec Theora. Como si fuera poco, en html5media disponemos una serie de controles para tomar control sobre el video; como ser:

• Control: Posibilidad de mostrar los botones (controles) del reproductor
• Autobuffer: Comenzar a cargar el video automáticamente
• Autoplay: Reproducir el video automáticamente
• Loop: Reproducir el video constantemente
• Splash image: añadir una imagen a modo de introducción el nuestro reproductor.

Para utilizar este maravilloso plugin, solo debemos realizar el llamado dentro de nuestro header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>

Y seguir la siguiente sintaxis:

<video src="video.mp4" width="320" height="240" controls autobuffer></video>

Y si necesitáramos servir dos versiones del mismo video (Theora y h.254)

<video class="video" poster="cat.jpg" width="352" height="264" controls autobuffer>
    <source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="cat.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Por ultimo no te olvides que puedes visualizar un demo del funcionamiento de este plugin.

Hay muchos navegadores que no soportan el tag <video> por lo que ese código automáticamente al detectar dicho navegador sirve una alternativa para la visualización, sin necesidad de javascript; por ende los videos serán visibles en los lectores de feed, Iphone y demás.

Al cargar la pagina el código sirve automáticamente el video vía el tag <video> (OGV), por lo que no se necesitan plugins adicionales en el navegador. Si el navegador no soporta el tag; se sirve el video como Quicktime (MP4), que se visualiza correctamente en Iphone. Ahora si Quicktime no esta instalado se servira el video utilizando flash (FLV) pudiendo embeber cualquier archivo en Flash, incluso videos desde Youtube.

Y como si fuero poco, si el navegador no soportara ni el tag <video> ni tuviera instalado Quicktime ni Flash, se sirve una imagen estática para que el usuario pueda descargar el video y reproducirlo localmente.

Las ventajas son evidentes al usar este código, estamos logrando que nuestro video siempre se resproduzca y el usario tenga acceso a él. La única desventaja es que debemos proporcionar el video en cada formato posible: OGG, MP4, Flash etc.

En la pagina encontraras el código completo fuertemente comentado para que le saques el jugo a tus videos.

Su integración es de lo mas sencilla, como así también su implementación. Una forma correcta de implementar Pluralink seria:

<a href="http://primerlink.com/||http://segundolink.org/" title="Descripcion del primer lik||Descripcion del segundo link">El poder de pluralink</a>

Y por ultimo Pluralink cuenta con Plugin para WordPress, por lo que su integración e implementación seran aun mucho mas sencillas.

Esta función trabaja PHP5 y utiliza simplexml_load_file para poder interpretar el XML que genera Feedburner.

Como primer paso para mostrar las estadísticas, debes tener “tildado” tu Feed como publico desde la pestaña publicize y activar el contador de Feed.

Ahora solo resta incluir nuestra función para mostrar las estadísticas:

<?php
function feedburner_stats($feed, $attribute) {
 if ( !$feed ) { echo('[No Feed]'); } //user must pass in their URI
 if ( !$attribute ) { echo('[No Attribute]'); }//user must pass in their attribute
 $xmlobj = simplexml_load_file("http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feed);
 echo($xmlobj->feed->entry->attributes()->$attribute);
 }
?>

El segundo argumento nos mostrara:

• date

  La fecha en la que el feed fue compilado

• circulation

  Cuantos lectores están suscritos

• hits

  La cantidad de Hits que recibio el feed

• reach

  A cuantos suscriptores llego el Feed

Y por ultimo tenemos que hacer la llamada:

 <h1>Tengo<i> <?php feedburner_stats('EliseosNey', 'circulation'); ?></i> suscriptores!<h1>

Listo, ahora tenemos un completo análisis de nuestro Feed en muy pocos pasos.

Por ultimo, te recomiendo que visites la pagina del autor donde encontraras un Demo de esta función junto con los archivos necesarios para personalizar tus estadísticas.