unijimpe » Google http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Mon, 28 Nov 2011 03:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Seguimiento de descargas con Google Analyticshttp://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/ http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/#comments Mon, 31 Oct 2011 02:48:19 +0000 unijimpe http://blog.unijimpe.net/?p=1299 Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los …

]]> Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los archivos de descargas, esto no se hace de forma automática por lo que hay que agregar un código adicional.

Utilizando Google Analytics

El primer paso es utilizar el código de seguimiento en nuestra página, actualmente se utiliza la versión asincrona la cual se debe colocar justo antes de la etiqueta </head>

  1. <script type="text/javascript">
  2.   var _gaq = _gaq || [];
  3.   _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  4.   _gaq.push(['_trackPageview']);
  5.  
  6.   (function() {
  7.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  8.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  9.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  10.   })();
  11. </script>

En donde UA-XXXXX-X es el código de seguimiento del sitio web el cual lo podemos obtener al registrar un sitio web en nuestra cuenta de Google Analytics.

Seguimiento de descargas con Google Analytics

Si en nuestra página tenemos archivos de descarga, en enlace de descarga es:

  1. <a href="/files/map.pdf">map</a>

Para que Google Analytics pueda registrar las descargas es necesario agregar una llamada al método _gaq.push en donde el segundo parámetro es un nombre con el cual se identificará la descarga.

  1. <a href="/files/map.pdf" onClick="_gaq.push(['_trackPageview','/files/map.pdf']);">map</a>

El código es muy sencillo y hay que colocarlo en cada enlace de descarga que se tenga.

Seguimiento de descargas con Google Analytics y Mootools

Si utilizas Mootools en tu página, entonces puedes utilizarlo para agregar el código de seguimiento de manera sencilla. Para ello a todos los enlaces de descarga le agregaremos un estilo llamado download.

  1. <a href="/files/map.pdf" class="download">map</a>

Luego podemos agregar el siguiente código con el cual se busca todos los enlaces con el estilo download y le agrega la llamada al método _gaq.push.

  1. window.addEvent('load', function() {
  2.    $$('.download').addEvent('click',function() {
  3.       _gaq.push(['_trackPageview', this.get('href').replace('http://','')]);
  4.    });
  5. });

Seguimiento de descargas con Google Analytics y jQuery

Si utilizamos jQuery podríamos modificar el código anterior el cual se convertiría en:

  1. $(document).ready(function () {
  2.    $('a.download').click(function() {
  3.       _gaq.push(['_trackPageview', $(this).attr('href').replace('http://','')]);
  4.    });
  5. });

Seguimiento de descargas automático

Si todas estas formas te parecen complicadas o ya tienes un sitio con muchas páginas y resulta complejo agregar el código de seguimiento, existe una solución llamada Entourage.js el cual agregará de forma automática el código de seguimiento a todos los enlaces que contengan archivos: .pdf, .zip, .doc, .xls, .ppt, .exe, .dmg, .mov, .avi y .mp3.

Para utilizar este método descargan los archivos y copian el archivo entourage.min.js y lo adjuntan a la página donde desean hacer el seguimiento, esto justo antes de colocar el código de Google Analytics.

  1. <script src="js/entourage.min.js"></script>

Esta pequeña librería con un tamaño de solo 579 bytes y que nos facilita de manera muy sencilla el trabajo de hacer el seguimiento de descargas en nuestra página.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/feed/ 4 Como incluir el botón Google +1 en tu Webhttp://blog.unijimpe.net/como-incluir-el-boton-google-1-en-tu-web/ http://blog.unijimpe.net/como-incluir-el-boton-google-1-en-tu-web/#comments Sun, 07 Aug 2011 17:22:52 +0000 unijimpe http://blog.unijimpe.net/?p=1285 El botón Google +1 es una utilidad de Google que permite a los usuarios marcar como recomendado el contenido de un determinado web. Estas recomendaciones serán mostradas en los resultados de Google y deben ser hechas …

]]> El botón Google +1 es una utilidad de Google que permite a los usuarios marcar como recomendado el contenido de un determinado web. Estas recomendaciones serán mostradas en los resultados de Google y deben ser hechas por usuarios con cuentas de Google. De esta manera nuestros visitantes recomendarán a sus amigos nuestro contenido de forma que tendremos una nueva manera de publicitar nuestra web.

Generador de Google +1

Google ofrece una página donde puedes configurar rápidamente el botón +1, obtener el código javascript para colocarlo en tu web. Para ello primero ingresamos a http://www.google.com/webmasters/+1/button/ donde seleccionamos el tamaño del botón (Small, Medium, Standard, Tall) y el idioma para obtener el código javascript.

El primer código lo ubican en donde desean se muestre en botón Google +1, pueden ubicar el varios lugares el código para mostrar varias veces el botón.

  1. <g:plusone></g:plusone>

El siguiente código se pone una sola vez y hay que colocarlo justo antes de la etiqueta </body>. Este código es la forma asincrona de insertar javascript externo en una web, lo cual hace que primero cargue todos los elementos de la pagina y al final recién se carga el javascript necesario para el funcionamiento del botón +1.

  1. <script type="text/javascript">
  2.   (function() {
  3.     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  4.     po.src = 'https://apis.google.com/js/plusone.js';
  5.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  6.   })();
  7. </script>

También es posible utilizar la forma tradicional para llamar al javascript externo, para ello en lugar del código anterior colocaremos el siguiente código en el header de tu HTML.

  1. <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Con lo cual obtenemos el siguiente resultado en nuestra página:

Estas son las configuraciones básicas, ahora si necesitas personalizar o integrar aún mas el botón Google +1, puedes leer la documentación en Adding the +1 button to your site.

Como pueden ver utilizar este nuevo botón es sencillo y ayudará a obtener mas visitas a nuestras paginas mediante las recomendaciones de nuestros visitantes a sus contactos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/como-incluir-el-boton-google-1-en-tu-web/feed/ 7 Tips para identificar problemas en SEOhttp://blog.unijimpe.net/tips-para-identificar-problemas-en-seo/ http://blog.unijimpe.net/tips-para-identificar-problemas-en-seo/#comments Mon, 06 Jun 2011 05:50:46 +0000 unijimpe http://blog.unijimpe.net/?p=1273 Auditar o identificar problemas relacionados con el SEO es el primer paso para posicionar adecuadamente un sitio web. Identificando los problemas podremos plantear soluciones adecuadas para corregir estos puntos débiles y reforzar nuestros aciertos.

Análisis en …

]]> Auditar o identificar problemas relacionados con el SEO es el primer paso para posicionar adecuadamente un sitio web. Identificando los problemas podremos plantear soluciones adecuadas para corregir estos puntos débiles y reforzar nuestros aciertos.

Análisis en los Motores de Búsqueda

El primer paso es verificar que la información de nuestro web esta indexada correctamente en los motores de búsqueda.

  • Busca en Google: site: tudominio.com, esto devolverá todas la páginas indexadas de tu dominio. Compara el total de páginas indexadas con el total de páginas que tienes alojadas en tu servidor.
  • Prueba buscar el nombre de tu web o marca y verificar tu posición en los buscadores. Si no existen resultados de tu web es probable que hayas sido penalizado.
  • Revisa la versión en cache que tienen los buscadores y verifica que sea la misma versión de tu página actual, si no es así entonces el buscador tiene indexado una versión antigua de tu página.

Análisis Contenido Duplicado

Verifica que tu dominio tenga canonicalización. Es decir que la versión no-www (http://tudominio.com) de tu web haga una redirección 301 a la versión www (http://www.tudominio.com) o viceversa. Si no existe esta redirección 301 ambas versiones puedes considerarse como dominios diferentes y una considerada como contenido duplicado.

Para hacer una revisión de contenido, realiza la búsqueda exacta de una frase (Entre comillas dobles) que se encuentre en tu web y analizar la cantidad y tipo de resultados devueltos. Tambíen puedes utilizar el la palabra clave intitle para indicar la búsqueda solo en los títulos.

  • Buscar en el contenido: "Frase a buscar"
  • Buscar en los titulos: intitle: "Frase a buscar"

Si tienes varias páginas con el mismo contenido, puedes utilizar la propiedad canonical para indicar a los buscadores cual de estas páginas debe ser considerada como contenido original:

  1. <link rel='canonical' href='http://blog.unijimpe.net/depurar-flash-con-firebug/' />

Análisis de los URLs

Revisar que los URLs de tu página sean cortos, limpios y descriptivos (Descriptivos: que contienen keywords indicadores del contenido hay en la página). Evitar incluir parámetros adicionales como identificadores, códigos de sesión entre otros. En resumen los URLs deben ser sencillos de recordar y deben indicar directamente el contenido que están alojando.

Ejemplos:

  • Incorrecto: http://blog.unijimpe.net/?p=1268
  • Correcto: http://blog.unijimpe.net/depurar-flash-con-firebug/

Análisis de la etiqueta <title>

Asegúrate que todas las páginas tengan títulos únicos y descriptivos. Recuerda que los títulos deben ser únicos pues de lo contrario los motores de búsqueda no distinguirán la diferencia entre las diferentes páginas. Deben ser descriptivos de forma que explique sin opción a dudas cual es el contenido de la página.

No es necesario incluir el nombre de tu marca en el titulo, pero si deciden hacerlo debe ser al final de titulo y con un carácter separador, esto para obtener mejores beneficios en el ranking de los buscadores. Además hay que verificar que los títulos deben ser de menos de 70 caracteres de longitud en lo posible.

Análisis de los Metatags

Revisa el metatag robots en todas las páginas de tu sitio. Ten en cuenta que si el metatag robots tiene asignado el valor NoIndex o NoFollow evitará que tu contenido sea indexado en los buscadores. El uso no intencionado de estos tags hará que el contenido no sea indexado. El siguiente código debe ser utilizado sólo cuando se quiera evitar que la página sea indexada, por ejemplo cuando el contenido es accesible sólo para usuarios registrados.

  1. <meta name="robots" content="noindex, nofollow" />

También es necesario revisar que el metatag description sea único y contenga un resumen del contenido de la página. El contenido de este tag será mostrado en los resultados de la búsqueda por lo que ayuda a los usuarios a obtener una idea del contenido de nuestra página. Si no puedes crear un resumen de la página elimina el metatag description y Google hará un resumen automático.

  1. <meta name="description" content="resumen del contenido de tu pagina " />

Analisis de robots.txt y sitemap.xml

En el archivo robots.txt se incluye un listado de las páginas o archivos que incluir o bloquear según el tipo de buscador. Es necesario verificar que este archivo no contengan enlaces que deseamos sean indexadas.

El archivo sitemap.xml es un documento XML que contiene todas las rutas con su respecto intervalo de tiempo a rastrear que deseamos enviar a los buscadores. Revisar que todas nuestras páginas estén incluidas con el intervalo de tiempo adecuado.

Para analizar estos dos archivos pueden utilizar las herramientas de Google Webmaster Tools.

Análisis de Redirecciones
Los buscadores interpretan el contenido de nuestra página pero no interpretan javascript, por lo que las redirecciones se deben hacer utilizando headers a nivel de servidor de lo contrario los motores de búsqueda no llegarán a la página de destino. Además de ello si se hace una redirección esta debe ser del tipo 301 para indicar que el contenido ha sido movido definitivamente a la nueva dirección. También hay que evitar el uso excesivo de las redirecciones pues estas incrementan el tiempo de carga de la página debido al tiempo que se toman los servidores para resolver las direcciones.

Se puede utilizar la herramienta HTTP Redirect Viewer para el análisis del tipo y cantidad de redirecciones.

Análisis de las Enlaces Internos

Revisa que las páginas no tengan enlaces excesivos. Google informa que se debe utilizar una máximo de 100 enlaces por cada página, por que debes incluir sólo las páginas que consideres mas importantes para no exceder es límite.

También es necesario verificar el uso correcto de los textos anchor en los enlaces internos. Esta es una oportunidad para informar a los usuarios y motores de búsqueda el contenido del enlace de destino, por lo cual debes elegir correctamente el texto del enlace.

  1. <!-- incorrecto -->
  2. <a href="contacto.php">Click Aquí</a>
  3. <!-- correcto -->
  4. <a href="contacto.php">Formulario de Contácto</a>

Tener en cuenta que Google no interpreta Javascript por lo cual los enlaces hechos de esta forma no serán interpretados y los buscadores nunca llegarán a la página de destino.

  1. <!-- incorrecto -->
  2. <a href="javascript:showContact();">Formulario de Contácto</a>
  3. <a href="#" onclick="showContact();">Formulario de Contácto</a>
  4. <!-- correcto -->
  5. <a href="contacto.php">Formulario de Contácto</a>

Si tus visitantes pueden publicar comentarios u otro tipo de contenido que incluyan enlaces, utiliza el la propiedad rel="nofollow" para evitar que estemos enlazando a sitios de baja calidad o sitios de spam lo que afectaría negativamente nuestro posicionamiento.

  1. <a href="http://spam-site.com" rel="nofollow">Spammer Site</a>

Análisis del Tiempo de Carga

Si el tiempo de carga de tu página es excesivo los motores de búsqueda lo considerarán como un factor en contra y en el peor caso no lo indexarán debido a la dificultad para acceder a nuestra información. Para hacer un análisis de la velocidad de carga se puede utilizar el plugin para Firebug YSlow o también la herramienta online Page Speed Online de Google.

Para resolver este problema, revisa que las imágenes de tu web no sean muy pesadas, utiliza los headers de expiración, minifica tus archivos js y css, utiliza gzip para enviar contenido. Para mas tips para acelerar la velocidad de carga pueden leer Optimizar Carga de Paginas Web.

Análisis del Código HTML

Los motores de búsqueda interpretan nuestra página como un texto plano y los tags HTML indican la forma como debe ser interpretado, pero estos no pueden interpretar imágenes, vídeos, flash. Interpretan texto pero no tienen la capacidad de interpretar código Javascript por lo cual lo que vemos en pantalla no es necesariamente lo que puede ser interpretado por el motor de búsqueda.

Entonces hay que asegurarse que nuestro código HTML sea redactado adecuadamente y muestre al buscador el contenido correcto de nuestro web. Se puede hacer un análisis de como interpretan los buscadores una página con SEO Parser la cual esta en estado beta pero que permite hacer una análisis de como nos ven los buscadores.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/tips-para-identificar-problemas-en-seo/feed/ 3 Factores que influyen en el SEOhttp://blog.unijimpe.net/factores-que-influyen-en-el-seo/ http://blog.unijimpe.net/factores-que-influyen-en-el-seo/#comments Mon, 09 May 2011 04:16:15 +0000 unijimpe http://blog.unijimpe.net/?p=1263 Existen diversos factores que afectan el posicionamiento de una página web, en la experiencia de los webmasters se ha demostrado que algunos influyen más que otros y en algunos casos existen factores que influyen negativamente. …

Factores]]> Existen diversos factores que afectan el posicionamiento de una página web, en la experiencia de los webmasters se ha demostrado que algunos influyen más que otros y en algunos casos existen factores que influyen negativamente.

Factores que afectan Positivamente

Keyword utilizado en la etiqueta <title>

El texto utilizado dentro de la etiqueta <title> se muestra en la barra de estado del navegador y se utiliza como titulo en el resumen del resultado de búsqueda. Es considerado el factor mas influyente en el posicionamiento. Si el titulo contiene el keyword que esta buscando el usuario hay mas probabilidad de aparecer en las primeras posiciones.

Recomendaciones:

  • No dejar páginas sin titulo como: "Untitled Page" o "Untitled Document".
  • El titulo debe ser descriptivo y describir completamente el contenido de la página.
  • Colocar títulos distintos a cada página, por ejemplo "Contáctenos - unijimpe".

Texto utilizado en los enlaces

El texto utilizado en los enlaces es una descripción del contenido que se esta enlazando. Si existen enlaces desde diferentes dominios que contienen un mismo keyword es una fuerte indicador del contenido de un web. Es por ello que conseguir enlaces desde otras páginas con el texto adecuado es importante para posicionar una página en los primeros lugares.

Recomendaciones:

  • Evitar crear enlaces del tipo Click Aquí en su lugar se debe utilizar Contáctenos.
  • Evitar utilizar javascript en la propiedad "href" del enlace, los buscadores no pueden seguirla.
  • Si se utiliza la propiedad rel="nofollow" los enlaces no son seguidos por Google.

Estructura de enlaces

Si se utiliza una estructura de enlaces limpia, que sea descriptiva de la sección donde nos encontramos y que contengan las palabras clave del contenido, tendremos mejores opciones para posicionar nuestro contenido. Por ejemplo en lugar de tener un enlace de la forma: producto.php?id=25 es mejor reemplazarlo por product/macbook-pro-13/ donde es obvio que estamos revisando la sección productos y especificamente un Macbook Pro de 13 pulgadas.

Autoridad Global del Sitio

Esto es la cantidad de enlaces que tiene el sitio web desde otros dominios. Si un sitio es considerado de gran autoridad el contenido de estas páginas aparecerán entre los primeros resultados de búsqueda. Para tener una idea de la autoridad de un sitio se puede ver el Pagerank de la página principal del dominio también utilizando Yahoo Site Explorer donde se puede conocer la cantidad de links entrantes.

Edad del Sitio

El tiempo del sitio es una señal de la importancia de un web. Un sitio que tiene 8 años se considera mas importante que un sitio creado hace 3 meses. Algunos señalan que la fecha de expiración del dominio también es importante por lo cual registran el dominio por varios años.

Popularidad del enlace en la estructura interna del Site

En la estructura interna de enlaces hay algunos que son mas importantes, esto es por la cantidad de enlaces que tienen dentro del mismo web. Así una pagina que tenga un enlace solo desde la sección contacto y no de las demás tienes menos importancia que los otros enlaces.

Relevancia tópica de los enlaces entrantes

Si los enlaces entrantes vienen desde otros sitios que tienen relevancia, entonces es mas probable que este contenido aparezca en los primeros resultados de la búsqueda. Estos enlaces se consiguen creando contenido de calidad de modo que otros sitios nos enlazarán como referencia.

Keyword utilizado en el contenido

Los motores de búsqueda analizan el contenido de nuestra página y si la palabra clave que busca un usuario se encuentra en el contenido de nuestra página entonces apareceremos en el resultado de las búsquedas.

Factores que afectan Negativamente

Servidor inaccesible a los buscadores

Si tu servidor web esta inaccesible (en determinados momentos) y el motor de búsqueda intenta acceder, entonces no se podrá indexar el contenido. Por lo cual es recomendable contratar un hosting de calidad que nos ofrezca un porcentaje alto de uptime.

Contenido similar o duplicado de otras páginas

Si el contenido de nuestra página es muy semejante o copiado de otros sitios, el buscador lo catalogará como contenido duplicado por lo cual la pagina con el contenido original aparecerá en los primeros lugares mientras que el duplicado será relegado a las ultimas posiciones.

Enlaces externos de baja calidad o de sitios de spam

Si nuestro web tiene enlaces desde sitios considerados como spamers es una señal que estamos trabajando con técnicas de spam por cual esto afectará negativamente para nuestro posicionamiento.

Compra de enlaces

La compra de enlaces es una técnica penalizada por los buscadores ya que intenta manipular el posicionamiento natural. Los buscadores detectan la compra de enlaces por ejemplo por el incremento abrupto de enlaces entrantes, es por ello que no es recomendable comprar enlaces o hacerlos utilizando la propiedad rel="nofollow".

Títulos y/o metatags duplicados

Si colocamos varias páginas con el mismo title y metatags los buscadores no distinguirán que tipo de contenido tiene cada página e incluso cual es la página principal. Es por ello que hay que tener cuidado cuando se redacten estos parámetros.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/factores-que-influyen-en-el-seo/feed/ 2 Optimización: Google Page Speed Onlinehttp://blog.unijimpe.net/optimizacion-google-page-speed-online/ http://blog.unijimpe.net/optimizacion-google-page-speed-online/#comments Mon, 04 Apr 2011 03:40:06 +0000 unijimpe http://blog.unijimpe.net/?p=1260 Page Speed el plugin para Firefox y Chrome que permite hacer análisis de la velocidad de carga de un web y ofrece sugerencias de optimización presenta ahora una versión online para realizar un diagnostico de la …

]]> Page Speed el plugin para Firefox y Chrome que permite hacer análisis de la velocidad de carga de un web y ofrece sugerencias de optimización presenta ahora una versión online para realizar un diagnostico de la velocidad de carga de nuestra web sin instalar ningún plugin a nuestro navegador favorito.

Page Speed Online ofrece un reporte agrupado en tres bloques:

  • High priority son puntos con los cuales puedes acelerar de gran manera tu web. Es recomendable implementar todas estas sugerencias. Entre estos puntos están: optimizar las imágenes, generar thumbnails de las imágenes, activar keep-alive, combinar CSS en sprites.
  • Medium priority estos puntos son menos decisivos para la velocidad de tu web pero puede beneficiarse con estas sugerencias. Entre estos puntos tenemos: Minificar CSS y JS, reducir la cantidad de redirecciones, configurar cache de contenido.
  • Low priority son puntos que tienen poco impacto en la velocidad de carga pero pueden ayudar en algo a acelerar nuestra web. En este bloque se encuentran: Evitar peticiones erroneas, eliminar query string en peticiones estáticas, etc.

Adicionalmente Page Speed ofrece dos tipos de análisis, el primero para la versión de escritorio de tu web y el otro es para la versión móvil de tu web. Siguiendo las sugerencias que ofrece esta herramienta podremos acelerar la carga de nuestra web con pequeños cambios que harán que nuestros visitantes tengan una mejor experiencia en nuestra web.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/optimizacion-google-page-speed-online/feed/ 6 Acortar URLs con PHP y Goo.glhttp://blog.unijimpe.net/acortar-urls-con-php-y-goo-gl/ http://blog.unijimpe.net/acortar-urls-con-php-y-goo-gl/#comments Mon, 21 Mar 2011 01:36:09 +0000 unijimpe http://blog.unijimpe.net/?p=1259 Goo.gl es el servicio de Google para acortar URLs semejante a Bit.ly que ofrece un API que permite acortar y expandir las URLs de manera sencilla. Además de ello ofrece estadísticas de visitas a nuestras URLs …

]]> Goo.gl es el servicio de Google para acortar URLs semejante a Bit.ly que ofrece un API que permite acortar y expandir las URLs de manera sencilla. Además de ello ofrece estadísticas de visitas a nuestras URLs acortadas para una análisis del rendimiento.

Creando un API Key
El proceso completo para hacer uso del API esta explicado en Getting Started - Google URL Shortener API. Donde se explica que para hacer poder acortar las URLs es necesario tener un API Key. Este key es gratuito y para obtenerlo hay que seguir los siguientes pasos.

  • Entra a Google API Console.
  • Crea un nuevo proyecto y activa "URL Shortener API".
  • Click en el menú "Identity" y en la sección Access Key encontrarás tu key.

Creando la Clase para Goo.gl

De acuerdo a la documentación creamos un clase en PHP con dos métodos shorten para acortar un URL y expand para expandir URLs.

  1. class Googl {
  2.     var $path;
  3.    
  4.     function Googl() {
  5.         $this->path = "https://www.googleapis.com/urlshortener/v1";
  6.     }
  7.     function shorten($url, $key) {
  8.         $ch = curl_init($this->path."/url?key=".$key);
  9.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  10.         curl_setopt($ch, CURLOPT_POST, true);
  11.         curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
  12.         curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(array('longUrl' => $url)));
  13.        
  14.         $rpta = curl_exec($ch);
  15.         $data = json_decode($rpta, true);
  16.         curl_close($ch);
  17.        
  18.         return $data["id"];
  19.     }
  20.     function expand($url) {
  21.         $ch = curl_init($this->path."/url?shortUrl=".$url);
  22.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  23.        
  24.         $rpta = curl_exec($ch);
  25.         $data = json_decode($rpta, true);
  26.         curl_close($ch);
  27.        
  28.         return $data["longUrl"];
  29.     }   
  30. }

Este código lo guardamos en un archivo llamado googl.php.

Utilizando la clase

Para utilizar la clase lo primero es incluir la clase al inicio de nuestro archivo PHPy luego creamos una instancia del objeto para utilizarlo posteriormente.

  1. require("googl.php");
  2. $googl = new Googl();

Entonces si deseamos acortar un URL haremos uso del método shorten el cual recibe dos parámetros el primero el URL que deseamos acortar y el segundo es tu Key.

  1. require("googl.php");
  2. $googl = new Googl();
  3. $urlmin = $googl->shorten("http://blog.unijimpe.net/tubeplayer/", "tu-api-key");
  4. echo "urlmin: ".$urlmin;

Si por el contrario deseamos expandir un URL ya acortado, haremos uso del método expand el cual recibe un único parámetro que el URL acortado que deseamos expandir.

  1. require("googl.php");
  2. $googl = new Googl();
  3. $urlmax = $googl->expand("http://goo.gl/E6pAi");
  4. echo "urlmax: ".$urlmax;

Como se puede ver el uso de esta clase es muy sencilla, solo hay que indicar el URL que deseamos acortar junto con nuestro API y generaremos automáticamente la versión acortada del mismo. Además de ello esta URL se anexará a nuestra cuenta de Goo.gl y podremos ver las estadísticas de visitas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/acortar-urls-con-php-y-goo-gl/feed/ 1 Convertir monedas con PHP y Google Financehttp://blog.unijimpe.net/convertir-monedas-con-php-y-google-finance/ http://blog.unijimpe.net/convertir-monedas-con-php-y-google-finance/#comments Wed, 30 Jun 2010 06:38:05 +0000 unijimpe http://blog.unijimpe.net/?p=1204 Google Finance es un servicio para temas relacionados a finanzas (Cotizaciones financieras, datos económicos de empresas y noticias financieras), entre las muchas herramientas que ofrece dispone de un conversor de monedas para la mayoría de monedas …

]]> Google Finance es un servicio para temas relacionados a finanzas (Cotizaciones financieras, datos económicos de empresas y noticias financieras), entre las muchas herramientas que ofrece dispone de un conversor de monedas para la mayoría de monedas del mundo. Aprovecharemos este servicio para crear un conversor de monedas personalizado.

Obteniendo la Información

Lo primero es obtener los datos, para ello utilizaremos un URL que Google Finance utiliza para mostrar el tipo de cambio.

  1. http://www.google.com/ig/calculator?hl=en&q=100USD%3D%3FPEN

Donde se tienen los siguiente parámetros:

  • 100 es el monto que deseamos convertir.
  • USD es la moneda que deseamos convertir (En este caso USD).
  • PEN es la moneda a la que deseamos convertir.

El cual devuelve como resultado los datos en formato JSON:

  1. {lhs: "1 U.S. dollar",rhs: "2.8239972 Peruvian nuevos soles",error: "",icc: true}

Para una lista completa de los códigos de monedas disponibles pueden visitar Currency Codes.

Implementando Conversor de Monedas Básico

Como los datos son devueltos en formato JSON, utilizaremos la librería JSON.php de la cual hemos comentado en JSON con PHP. Entonces crearemos un script para mostrar la equivalencia entre el Dolares Americanos (USD) y Nuevos Soles (PEN).

Primero incluimos la librería JSON.php luego utilizamos la función file_get_contents para obtener los datos desde el URL donde hemos puesto los códigos de las monedas a convertir. Después decodificamos el contenido.

  1. require_once("JSON.php");
  2. $path = "http://www.google.com/ig/calculator?hl=en&q=1USD%3D%3FPEN";
  3. $data = file_get_contents($path);
  4.  
  5. $json = new Services_JSON();
  6. $obj = $json->decode($data);

Una vez obtenido los valores solo queda imprimir los resultados en nuestra página.

  1. <h2>Currency Converter</h2>
  2. <strong>From:</strong> <?php echo $obj->lhs; ?><br />
  3. <strong>To:</strong> <?php echo $obj->rhs; ?>

Pueden ver el resultado de este ejemplo en http://samples.unijimpe.net/currency/.

Conversor de Monedas Personalizado

Ahora si deseamos que el usuario seleccione que moneda desea convertir, se puede agregar dos selectores: uno para seleccionar la moneda de origen al cual llamaremos from y otro para definir la moneda de destino llamado to. Luego solo nos queda procesar los datos del formulario y mostrar los resultados.

  1. if ($_POST['from'] != "" && $_POST['to'] != "") {
  2.     $from = $_POST['from'];
  3.     $to = $_POST['to'];
  4.    
  5.     $path = "http://www.google.com/ig/calculator?hl=en&q=1".$from."=?".$to;
  6.     $data = file_get_contents($path);
  7.    
  8.     $json = new Services_JSON();
  9.     $obj = $json->decode($data);
  10.  
  11.     echo "<strong>1 ".$from." = ".$obj->rhs."</strong>";
  12.  }

A nuestro segundo ejemplo le agregamos una hoja de estilos y ordenamos nuestro formulario para obtener un buen resultado. Pueden ver el resultado del ejemplo en http://samples.unijimpe.net/currency/custom.php.

Como pueden ver basado en nuestro conocimiento de JSON con PHP podemos utilizar un servicio para integrarlo a nuestra de manera rápida. Les dejo los archivos fuente del ejemplo para que lo puedan estudiar y hacer sus pruebas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/convertir-monedas-con-php-y-google-finance/feed/ 8 Google Font Library – Fuentes para tu Webhttp://blog.unijimpe.net/google-font-library-fuentes-para-tu-web/ http://blog.unijimpe.net/google-font-library-fuentes-para-tu-web/#comments Fri, 21 May 2010 04:56:29 +0000 unijimpe http://blog.unijimpe.net/?p=1171 Google Font Library es un servicio recién lanzado por Google que permitirá incluir fuentes o tipografías adicionales a las tradicionales con la cual se puede dar un mejor aspecto a diseño de un website o blog.…

]]> Google Font Library es un servicio recién lanzado por Google que permitirá incluir fuentes o tipografías adicionales a las tradicionales con la cual se puede dar un mejor aspecto a diseño de un website o blog.

Para ello Google aloja en sus servidores fuentes gratuitas las cuales podemos integrar en nuestro web gracias a un API que han creado. Esto hará que podamos incluir tipografías diferentes a las tradicionales (Arial, Verdana, Times, etc.) que nos ayudará a dar un mejor acabado a nuestro web que de otra forma lo haríamos utilizando imágenes o flash.

Utilizar Google Font Library

Lo primero es elegir la fuente para ello pueden ver el listado de fuentes disponibles con todas sus variantes (normal, italic, bold, etc.) en Google Font Directory. Primero cargamos la tipografía utilizando el tag link y luego podemos utilizar la tipografía como si fuera una fuente estandar. Por ejemplo escogemos la fuente 'Lobster' y deseamos aplicarlo a los elementos h1 de nuestra página.

  1. <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  2. <style type="text/css">
  3. body {
  4.    font-family: 'Lobster', serif;
  5.    font-style: italic;
  6.    font-size: 24px;
  7. }
  8. </style>

Si deseas incluir mas de una fuente debes separar los nombres de las fuentes por el carácter "|" en la ruta, por ejemplo si deseamos utilizar las fuentes Lobster y Cantarell, tendríamos.

  1. http://fonts.googleapis.com/css?family=Lobster|Cantarell

Como pueden ver es sencillo de utilizar y como las fuentes están alojadas en los servidores de Google nos garantizan una excelente velocidad de carga. Para demostrar el funcionamiento de este servicio pueden ver un ejemplo funcionando en google-font donde hemos utilizado dos fuentes diferentes, pueden ver el código fuente para ver como hemos utilizado este servicio.

Font previewer

Para facilitar el uso de esta librería, pueden visitar Font Previewer en donde pueden seleccionar la tipografía, variante, tamaño y demás opciones y tendrán automáticamente generado el código que deben utilizar en su web.

Compatibilidad

Esta librería tiene sus limitaciones y es que solo funciona en las navegadores mas modernos. Los navegadores compatibles con esta librería son:

  • Google Chrome: versión 4.249.4+
  • Mozilla Firefox: versión: 3.5+
  • Apple Safari: versión 3.1+
  • Microsoft Internet Explorer: versión 6+

Google Font API no es compatible con: iPhone, iPad, iPod, o Android. En el caso de estos dispositivos el browser mostrará la siguiente tipografía en la lista de tipografías de la hoja de estilos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/google-font-library-fuentes-para-tu-web/feed/ 9 Reporte del Clima con PHP y Googlehttp://blog.unijimpe.net/reporte-del-clima-con-php-y-google/ http://blog.unijimpe.net/reporte-del-clima-con-php-y-google/#comments Tue, 20 Oct 2009 03:19:51 +0000 unijimpe http://blog.unijimpe.net/?p=1110 En el artículo Showing the weather with PHP and Google Weather API en donde explican la forma de obtener los datos del clima utilizando Google. Para ello acceden a un URL utilizado en iGoogle el cual …

]]> En el artículo Showing the weather with PHP and Google Weather API en donde explican la forma de obtener los datos del clima utilizando Google. Para ello acceden a un URL utilizado en iGoogle el cual devuelve un XML con los datos del clima actual para la ciudad seleccionada y el pronostico para los siguientes tres días.

gweather

Obteniendo los datos de Google
Para obtener los datos del clima (condición, temperatura, humedad, vientos) de una ciudad determinada podemos acceder al siguiente URL.

  1. http://www.google.com/ig/api?weather=city

Estos datos son devueltos en idioma ingles, podemos agregarle un parámetro adicional hl para indicar el idioma de la respuesta, por ejemplo para español.

  1. http://www.google.com/ig/api?weather=city&hl=es

Utilizando PHP para mostrar los datos
Ahora que ya sabes de donde obtener los datos los cargamos con PHP utilizando la función file_get_contents y posteriormente los convertimos en un array utilizando xml2array.

  1. require("xml2array.php");
  2.  
  3. $url = "http://www.google.com/ig/api?weather=lima&hl=es";
  4. $contents = file_get_contents($url);
  5. $data = xml2array($contents);
  6.  
  7. $weather_info = $data['xml_api_reply']['weather']['forecast_information'];
  8. $weather_current = $data['xml_api_reply']['weather']['current_conditions'];
  9. $weather_forecast = $data['xml_api_reply']['weather']['forecast_conditions'];

Como se puede ver, hemos obtenido los datos de los nodos forecast_information, current_conditions, forecast_conditions en tres variables. Estos nodos contienen los datos de la ciudad consultada, los datos actuales clima y la predicción del clima para los siguientes tres días.

El siguiente paso es imprimir los datos que hemos obtenido de las respectivas variables. Si mostramos los datos del clima actual tendríamos el siguiente código:

  1. <h3>Google Weather Demo </h3>
  2. <div id="current">
  3.     <strong><?php echo utf8_encode($weather_info['city']['attr']['data']); ?></strong><br />
  4.     <img src="<?php echo $weather_current['icon']['attr']['data']; ?>" />
  5.     Condición: <?php echo $weather_current['condition']['attr']['data']; ?><br />
  6.     Temperatura: <?php echo $weather_current['temp_c']['attr']['data']; ?> &deg;C<br />
  7.     <?php echo $weather_current['humidity']['attr']['data']; ?><br />
  8. </div>

Nótese que mostramos el icono con el clima actual, los datos de la condición, temperatura y humedad. Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/gweather/basic.php

También podemos mostrar las predicciones del clima para los siguientes días utilizando la variable $weather_forecast que contiene un array para ello escribimos:

  1. <div id="forecast">
  2.     <?php for ($i=0; $i<sizeof($weather_forecast); $i++) { ?>
  3.     <?php $foreday = $weather_forecast[$i]; ?>
  4.     <div id="item">
  5.     <?php echo utf8_encode($foreday['day_of_week']['attr']['data']); ?><br />
  6.     <img src="<?php echo $foreday['icon']['attr']['data']; ?>" /><br />
  7.     <?php echo $foreday['low']['attr']['data']; ?>&deg;C |
  8.     <?php echo $foreday['high']['attr']['data']; ?>&deg;C
  9.     <?php } ?>
  10. </div>

Agregando CSS y un formulario de búsqueda podemos obtener excelentes resultados, solo depende de nuestra imaginación. Pueden ver ejemplo final funcionando en http://samples.unijimpe.net/gweather/.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/reporte-del-clima-con-php-y-google/feed/ 45 Gráficos con PHP y Google Chartshttp://blog.unijimpe.net/graficos-con-php-y-google-charts/ http://blog.unijimpe.net/graficos-con-php-y-google-charts/#comments Wed, 14 Oct 2009 06:30:05 +0000 unijimpe http://blog.unijimpe.net/?p=1100 Google Charts es un API de Google que permite crear gráficos estadísticos de manera sencilla, estos gráficos se pueden crear accediendo a un URL con los parámetros adecuados. Entre los gráficos disponibles se encuentran: Line chart, …

]]> Google Charts es un API de Google que permite crear gráficos estadísticos de manera sencilla, estos gráficos se pueden crear accediendo a un URL con los parámetros adecuados. Entre los gráficos disponibles se encuentran: Line chart, Sparkline, Bar chart, Pie chart, Venn diagram, Scatter plot, Radar chart, Map, Google-o-meter, QR codes.

Por ejemplo podríamos crear un gráfico del tipo Pie en 3D con dos valores tendríamos un URL de la forma: http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=300x120&chl=Hombres|Mujeres

Google Charts con PHP
Para facilitarnos el proceso de crear estos gráficos existe la clase googchart escrita en PHP 5, el cual brinda una serie de métodos para generar gráficos estadísticos complejos con lineas de código sencillas.

Para utilizar esta clase primero descargamos la librería y copiamos el archivo GoogChart.class.php el cual contiene la clase que necesitamos, luego incluimos este archivo al inicio de nuestros scripts.

  1. include('GoogChart.class.php');
  2. $chart = new GoogChart();

A continuación creamos un array con los datos que deseamos graficar, el siguiente paso es crear el array con los colores a utilizar y finalmente utilizamos el método setChartAttrs donde pasamos como parámetros el tipo de gráfico, el titulo, un array con los datos a graficar, las dimensiones del gráfico y finalmente un array con los colores a utilizar en el gráfico.

  1. $data = array(
  2.             'IE7' => 22,
  3.             'IE6' => 30.7,
  4.             'IE5' => 1.7,
  5.             'Firefox' => 36.5,
  6.             'Mozilla' => 1.1,
  7.             'Safari' => 2,
  8.             'Opera' => 1.4,
  9.         );
  10. $color = array(
  11.             '#99C754',
  12.             '#54C7C5',
  13.             '#999999',
  14.         );
  15. $chart->setChartAttrs( array(
  16.             'type' => 'pie',
  17.             'title' => 'Browser market 2008',
  18.             'data' => $data,
  19.             'size' => array( 400, 300 ),
  20.             'color' => $color
  21.     ));

Finalmente mostramos la imagen imprimiendo la variable $chart y generaremos la imagen deseada como se muestra a continuación.

pie-chart

Ahora si por ejemplo deseamos crear un gráfico de barras comparando dos valores, creamos primero un array multi-dimensional con los valores que deseamos graficar y al momento de crear el gráfico seleccionamos el tipo bar-vertical tendríamos el siguiente ejemplo:

  1. include('GoogChart.class.php');
  2. $chart = new GoogChart();
  3.  
  4. $data = array(
  5.         'February 2008' => array (
  6.             'IE7' => 22,
  7.             'IE6' => 30.7,
  8.             'IE5' => 1.7,
  9.             'Firefox' => 36.5,
  10.             'Mozilla' => 1.1,
  11.             'Safari' => 2,
  12.             'Opera' => 1.4,
  13.         ),
  14.         'January 2008' => array (
  15.             'IE7' => 22,
  16.             'IE6' => 30.7,
  17.             'IE5' => 1.7,
  18.             'Firefox' => 36.5,
  19.             'Mozilla' => 1.1,
  20.             'Safari' => 2,
  21.             'Opera' => 1.4,
  22.         ),
  23.     );
  24. $color = array(
  25.             '#99C754',
  26.             '#54C7C5',
  27.             '#999999',
  28.         );
  29. $chart->setChartAttrs( array(
  30.             'type' => 'bar-vertical',
  31.             'title' => 'Browser market 2008',
  32.             'data' => $data,
  33.             'size' => array( 550, 300 ),
  34.             'color' => $color,
  35.             'labelsXY' => true,
  36.     ));
  37. echo $chart;

Con lo cual obtenemos el gráfico de barras comparativo de dos tipos de datos como se muestra a continuación.

bar-chart

Como pueden ver los resultados son de muy buena calidad y el código para la creación es muy sencilla. Además al utilizar Google Charts API es que el procesamiento se hace en los servidores de Google con lo cual ahorramos capacidad de procesamiento en nuestros servidores.

Para una lista completa de los tipos de gráficos disponibles pueden leer Chart Types o también pueden leer la documentación completa en Developer's Guide.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/graficos-con-php-y-google-charts/feed/ 10