Expresiones regulares para dar formato a un Tweet

Las expresiones regulares es una de las ramas de la programación que más exprime nuestra creatividad, capaces de convertir un complejo algoritmo de parsing en una simple línea de código. A mi particularmente se me dan regulares las expresiones regulares xD, por ello tengo mi propia lista de expresiones favoritas y hoy os compartiré la más moderna de ellas relacionada con Twitter y que he utilizado en mis últimas twitapps LocaFollow y FollowFriday.

Se trata de un conjunto de expresiones que identifican y dan formato a las diferentes partes de un Tweet:

• Encuentra las URLs convirtiéndolas en enlaces con la etiqueta <a>
• Encuentra las menciones a usuarios de la forma @nombre_usuario, convirtiéndola en enlaces con la etiqueta <a> hacia http://twitter.com/nombre_usuario
• Encuentra los hashtags de la forma #parabra, convirtiéndolos en enlaces con la etiqueta <a> que apuntan hacia http://search.twitter.com/search?q=palabra

Ejemplo

Os dejo las implementaciones javascript y php:

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function linkify($status_text, $links = true, $mentions = true, $hashtags = true) {
  // dar formato a URLs
  if ($links) {
    $status_text = preg_replace(
      '/(https?:\/\/\S+)/',
      '<a href="\1?phpMyAdmin=Za64-l76GuOml1u3RA%2Cqg1O5lQ6">\1</a>',
      $status_text
    );
  }	
 
  // dar formato a las menciones
  if ($mentions) {
    $status_text = preg_replace(
      '/(^|\s)@(\w+)/',
      '\1@<a href="http://twitter.com/\2">\2</a>',
      $status_text
    );
  }	
 
  // dar formato a hastags
  if ($hasttags) {
    $status_text = preg_replace(
      '/(^|\s)#(\w+)/',
      '\1#<a href="http://search.twitter.com/search?q=%23\2">\2</a>',
      $status_text
    );
  }	
 
  return $status_text;
}

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function linkify(status_text, links, mentions, hashtags) {
  // dar formato a URLs
  if (links) {
    status_text = status_text.replace(/(https?:\/\/\S+)/gi,'<a href="$1?phpMyAdmin=Za64-l76GuOml1u3RA%2Cqg1O5lQ6">$1</a>');
  }	
 
  // dar formato a las menciones
  if (mentions) {
    status_text = status_text.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>');
  }	
 
  // dar formato a hastags
  if (hashtags) {
    status_text = status_text.replace(/(^|\s)#(\w+)/g,'$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
  }	
 
  return status_text;
}

Inspiración: Linkify Your Twitter Feed por David Walsh.

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

Validadores Online de JSON

Y diréis… ¿para qué un validador online de JSON?, si para todos los lenguajes hay codificadores y decodificadores que funcionan a la perfección… pues a mí me han ahorrado mucho trabajo y por eso los comparto. Cada vez que estoy estudiando una API que devuelve sus resultados en JSON y que están escasamente documentadas. Si queremos examinar manualmente los resultados JSON de estas APIs, nos costará su trabajo porque no suelen tener tabulaciones y son prácticamente ilegibles.

Y no estoy hablando de cualquier API de servicios desconocidos o poco profesionales. La misma API de Twitter apenas documenta los detalles de sus resultados y con estos validadores online de JSON les suelo dar formato para comprenderlos mejor.

La herramienta que utilizo es JSON Formatter. Es bien sencilla, permite copiar el JSON o tomarlo desde una URL y da opciones de validarlo contra el estándar de JSON o simplemente darle formato.

Por ejemplo el resultado de esta llamada a la API de búsquedas de Twitter es ilegible http://search.twitter.com/search.json?callback=foo&q=twitter, lo copiamos en JSON Formatter:

JSON sin formato

Y obtenemos una versión totalmente legible:

JSON con formato

Otro validador online de JSON más sencillo pero igual de útil es JSONLint

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

6 Librerías para gráficos y diagramas con PHP

En muchas ocasiones es inevitable utilizar gráficas para mostrar estadísticas o informes de datos en nuestros proyectos. Una imágen vale mas que mil palabras, de aquí la importancia que reviste el correcto uso de las gráficas, para visualizar de forma amena dichos datos.

A continuación os muestro una recopilación que realicé de varias bibliotecas para la implementación de gráficos y diagramas sobre web, de cada uno se explican sus características más importantes así como algunas ventajas o desventajas a mi consideración:

1. Open Flash Chart


Open Flash Chart

En mi opinión una de las mejores librerías para la realización de gráficos que existen en la actualidad en Internet, dentro de sus características fundamentales se destaca el dinamismo y la animación de sus gráficos, así como su diversidad en la implementación.

Open Flash Chart, esta basado principalmente en PHP para la lectura de los datos y en Flash para mostrar los mismos en forma de grafico. También encontraremos implementaciones en otros lenguajes, pero menos fiables según el autor.

A su favor: Gratis, Licencia GPL, diversidad de gráficos, diseño agradable.
En su contra: conocimientos medios o avanzados en PHP para su completa implementación.
Requerimientos: Flash player 9

Ejemplos | Descarga

2. FusionCharts


FusionCharts

FucionCharts es una librería libre y de código abierto para la creación de gráficos y diagramas en flash, dentro de sus mejores características están la interactividad y los excelentes efectos de animación en la muestra de los datos en forma de gráfico, además de que no sólo puede ser usado en webs, sino tambien en aplicaciones de escritorio y presentaciones.

A su favor: excelente diseño con buenos efectos de animación al mostrar los gráficos, se puede usar también en aplicacions de escritorio, puede usarse con PHP, ASP.NET, ColdFusion , Pyton.
En su contra: requerimientos medios o avanzados de programación
Requerimientos: Flash player 9.

Ejemplos | Descarga

3. XML/SWF Charts


XML/SWF Charts

Excelente librería para crear atractivos diagramas y gráficos que tiene al igual que el anterior un excelente diseño de presentación y diversidad de tipos. Esta librería se basa en XML para obtener los datos y en películas SWF para mostrar sus resultados en forma de gráficas.

A su favor: de licencia GPL, diversidad de gráficos, diseño agradable.
En su contra: si los datos son tomados de una BD es obligatorio la creación de un fichero XML intermedio entre la BD y la película de flash que muestra el gráfico.
Requerimientos: Flash player 9

Ejemplos | Descarga

4. Max’s Charts


Max’s Charts

Sencilla y simple librería para la creación de gráficos de tipo horizontal y vertical en PHP, se caracteriza por su facilidad en la implementación, aunque una de sus principales desventajas es que sólo puede usarse en gráficos verticales y horizontales, es decir, una buena recomendación para principiantes o para la creación de Webs con informes y gráficas sencillas. Los resultados se muestran utilizando CSS con un diseño relativamente agradable.

A su favor: de libre distribución, buen diseño, uso de CSS.
En su contra: poca diversidad en tipos de gráficos.
Requerimientos: cualquier navegador

Ejemplos | Descarga

5. pChart


pChart

pChart es una clase orientada al trabajo con framework, para la creación de gráficos y diagramas en PHP, los datos pueden ser tomados desde extructuras SQL, ficheros CVS o introducidos manualmente, esta librería está actualmente bajo desarrollo y pueden surgir nuevas versiones en un futuro. Los datos se muestran creando imágenes utilizando la librería GD de PHP.

A su favor: de libre distribución, puede tomar datos tanto de BD como de ficheros CVS
En su contra: no tiene un diseño tan refinado como las anteriores, y debe tener instalado la librería GD en su servidor de PHP.
Requerimientos: cualquier navegador.

Ejemplos | Descarga

6. QGoogleVisualizationAPI


QGoogleVisualizationAPI

Útil y excelente clase para generar gráficas con Google Visualization API. La misma provee una clase que puede generar código HTML el cual puede incluir gráficos generados por Google Visualization API en sus webs. También provee diferentes tipos de gráficos como son barras, pastel, lineales, etc.

A su favor: buena presentación de las gráficas, excelente para diagramas de pamas, diversos tipos de diagramas y graficos.
En su contra: conocimientos medios y avanzados de programación para la implementación.
Requerimientos: cualquier navegador

Ejemplos | Descarga

Mis recomendaciones finales para los programadores de conocimientos medios y avanzados es el uso de Open Flash Chart o Fucion Charts y los programadores principiantes pueden dar sus primeros pasos utilizando Max’s Charts, aunque como siempre sois vosotros mismos los que debéis hacer vuestros propios experimentos y aplicar el que mejor os sirva dada las condiciones del proyecto.

La propuesta de SEO para AJAX de Google ya es realidad

El pasado octubre Google publicó una propuesta de estándar para hacer un sitio AJAX indexable por los buscadores. La solución consistía en añadir una carácter especial ! a la almohadilla # que se suele utilizar para parametrizar las páginas AJAX.

Las URLs quedarían así http://www.miweb.com/#!accion-parametro1-parametro2, y del lado del servidor habría que escuchar URLs en la forma http://www.miweb.com/?_escaped_fragment_=accion/parametro1-parametro2. La propuesta sugería instalar un headless browser en nuestro servidor para que interpretara el javascript y brindara el HTML interpretado al bot del buscador a través de la anterior URL. O sea que donde el bot encuentre URLs con los caracteres #!, en vez de indexar esa URL indexaría la versión del servidor terminada en ?_escaped_fragment_=accion/parametro1-parametro2.

En aquel momento critiqué la propuesta y hoy lo vuelvo a hacer… paso de sobrecargar mi servidor para ahorrarle trabajo a Google instalando nada. Pero esto no implicaba que hiciera mis experimentillos para sacarle partido a todo esto.

Un par de semanas después lanzamos el buscador de Twitter LocaFollow, un proyecto que surgió gracias a este experimento y otras cosas que quería probar con Google App Engine, Google AJAX API y con la API de Twitter, pero esa es otra historia que da para otro post ;-).

LocaFollow es un sitio totalmente AJAX, todo el trabajo se realiza en javascript y casi nada del lado del servidor. Evidentemente esto está contraindicado para cualquier proyecto que pretenda posicionarse en buscadores por muchos términos, cosa que inicialmente no entraba en mis objetivos.

En LocaFollow implementamos la propuesta de SEO AJAX de Google. Si hacéis una búsqueda veréis que se forman URLs de la forma http://www.locafollow.com/#!twitters/consultor/barcelona//.html o http://www.locafollow.com/#!twitters/ceo/madrid//.html. Tradicionalmente estas dos URLs de cara a los buscadores serían simplemente http://www.locafollow.com porque el protocolo HTTP no transmite la información después del carácter # y no seríamos capaces de mostrarle una versión diferenciada según los parámetros.

Pero del lado del servidor hemos implementado los handlers para escuchar URLs de la forma http://www.locafollow.com/?_escaped_fragment_=twitters/consultor//barcelona/.html que son las que Google intentará acceder para obtener el javascript interpretado. Por supuesto que no implementé ningún headless browser, lo que he hecho es publicar con un caché que tengo en el servidor una versión lo más parecido posible a lo que genera el javascript. Por lo visto ha funcionado y a día de hoy tenemos unas 2000 páginas indexadas de lo que en realidad es una única página.

Ya sabemos que no ha quedado solo en propuesta y no sólo porque 2000 URLs estén indexadas, la prueba fehaciente es que las Herramientas de Webmaster de Google muestra los enlaces del servidor en vez de los del cliente con #!.

Enlaces AJAX vistos desde las Herramientas de Webmasters de Google

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.