unijimpe http://blog.unijimpe.net Desarrollo Web: PHP, MySQL, jQuery, SEO Mon, 02 Mar 2015 16:21:08 +0000 es-ES hourly 1 http://wordpress.org/?v=4.2.2 http://blog.unijimpe.nethttp://samples.unijimpe.net/logo-unijimpe.jpgunijimpeConfigura tus páginas para compartir en Facebookhttp://feedproxy.google.com/~r/unijimpe/~3/FvYSv2WKjes/ http://blog.unijimpe.net/configura-tus-paginas-para-compartir-en-facebook/#comments Thu, 26 Feb 2015 04:24:33 +0000 http://blog.unijimpe.net/?p=1403 Con el uso extendido de las redes sociales es muy común que los visitantes a una web compartan el contenido en Facebook, pero si no tenemos cuidado en la configuración de nuestra página el resultado puede …

]]>
Con el uso extendido de las redes sociales es muy común que los visitantes a una web compartan el contenido en Facebook, pero si no tenemos cuidado en la configuración de nuestra página el resultado puede no ser el mejor.

Primera veamos el código de una página que no ha tenido en cuenta la configuración adecuada para ser compartida en Facebook:

  1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  2. <title>SEO Parser | Search Engine analysis tool</title>

Se puede ver que sólo se ha utiliza el tag para el título de la página, si esta se comparte en Facebook se obtiene el siguiente resultado el cual no muestra la imagen de nuestra página y un resumen del contenido.

share-ogtags-not

Utilizando og:tags

Para personalizar el contenido que se desea compartir, Facebook pone a disposición una seria de metatags HTML llamados og:tags, los mas importantes para compartir son los siguientes:

  • og:url es el url absoluto de la página que se esta compartiendo.
  • og:title es el título que se mostrará al compartir en Facebook.
  • og:description es un resumen del contenido que se comparte.
  • og:image contiene la ruta de la imagen que se mostrará.

Luego si tenemos en cuenta estas metatags, podemos personalizar el contenido que deseamos compartir para nuestra página.

  1. <meta http-equiv="Content-Type" content"text/html; charset=UTF-8" />
  2. <title>SEO Parser | Search Engine analysis tool</title>
  3. <meta property="og:url" content="http://seoparser.com" />
  4. <meta property="og:title" content="SEO Parser" />
  5. <meta property="og:description" content="SEO Parser is a SEO analysis tool that can examine and understand how to view a Web page on Search Engines." />
  6. <meta property="og:image" content="http://seoparser.com/img/seo-parser.png" >

Con lo cual obtenemos el siguiente resultado, el cual obviamente es muestra de manera correcta el contenido de nuestra web.

share-ogtags-yes

Depuración de los og:tags

Finalmente hay que saber que Facebook hace una copia temporal de contenido que se esta intentando compartir, por lo que una vez que se ha intentado compartir este contenido se utilizará posteriormente compartir en Facebook y se actualizará es las siguientes horas.

Entonces para visualizar el contenido final que estamos compartiendo Facebook ha creado una herramienta llamada: Open Graph Object Debugger que muestra: el contenido actual de nuestra página, un resumen de los tags utilizados y alertas en caso falten o esten errados alguns tags.

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/configura-tus-paginas-para-compartir-en-facebook/feed/ 1 http://blog.unijimpe.net/configura-tus-paginas-para-compartir-en-facebook/
Precarga tu página con jQuery y CSShttp://feedproxy.google.com/~r/unijimpe/~3/YOI6lPDrisE/ http://blog.unijimpe.net/precargar-tu-pagina-con-jquery-y-css/#comments Sun, 11 May 2014 23:36:56 +0000 http://blog.unijimpe.net/?p=1378 Precargar una página es importante para mejorar la experiencia del usuario, esto en caso nuestra página sea muy pesada o por que cuando la página no se ha cargado completamente se puede ver desordenada o incompleta.…

]]>
Precargar una página es importante para mejorar la experiencia del usuario, esto en caso nuestra página sea muy pesada o por que cuando la página no se ha cargado completamente se puede ver desordenada o incompleta.

preloader

Un poco de teoría

Para inicializar una página se realiza con el evento ready es decir cuando se cargado el DOM o HTML, además de ello existe el evento load el cual se ejecuta cuando ademas del HTML se ha cargado todo el contenido (imágenes, css, etc).

  1. $(document).ready(function(e) {
  2.    // html loaded
  3. });
  4. $(document).load(function(e) {
  5.    // html + images + css loaded
  6. });

Entonces lo que haremos es agregar un div que cubra toda la página y una vez que todo el contenido se haya cargado ocultar este div para develar el contenido de nuestra web.

Implementado en Precargador

Lo primero es editar nuestro HTML y crear un div que contendrá la imagen de un precargador.

  1. &lt;div id=&quot;preloader&quot;&gt;
  2.     &lt;div id=&quot;loader&quot;&gt;&amp;nbsp;&lt;/div&gt;
  3. &lt;/div&gt;

Luego agregamos código CSS para hacer que este div recién creado se muestre cubriendo completamente nuestra página:

  1. body {
  2.     overflow: hidden;
  3. }
  4. /* preloader */
  5. #preloader {
  6.     position: fixed;
  7.     top:0; left:0;
  8.     right:0; bottom:0;
  9.     background: #000;
  10.     z-index: 100;
  11. }
  12. #loader {
  13.     width: 100px;
  14.     height: 100px;
  15.     position: absolute;
  16.     left:50%; top:50%;
  17.     background: url(../img/loader.gif) no-repeat center 0;
  18.     margin:-50px 0 0 -50px;
  19. }

Finalmente agregamos el código javascript, para ello detectamos que se ha completado la carga de todo el contenido del HTML utilizando el método ready y utilizamos una transición para ocultar el div creado previamente con lo cual se devela nuestra página.

  1. $(window).load(function() {
  2.     $('#preloader').fadeOut('slow');
  3.     $('body').css({'overflow':'visible'});
  4. })

Finalizando

Ahora que tenemos todo el proceso lo vamos a unir en un solo archivo html para hacer las pruebas respectivas:

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;title&gt;Preloader Demo&lt;/title&gt;
  4. &lt;style type=&quot;text/css&quot;&gt;
  5. body {
  6.     overflow: hidden;
  7. }
  8. /* preloader */
  9. #preloader {
  10.     position: fixed;
  11.     top:0; left:0;
  12.     right:0; bottom:0;
  13.     background: #000;
  14.     z-index: 100;
  15. }
  16. #loader {
  17.     width: 100px;
  18.     height: 100px;
  19.     position: absolute;
  20.     left:50%; top:50%;
  21.     background: url(img/loader.gif) no-repeat center 0;
  22.     margin:-50px 0 0 -50px;
  23. }
  24. &lt;/style&gt;
  25. &lt;/head&gt;
  26. &lt;body&gt;
  27. &lt;div id=&quot;preloader&quot;&gt;
  28.     &lt;div id=&quot;loader&quot;&gt;&amp;nbsp;&lt;/div&gt;
  29. &lt;/div&gt;
  30. &lt;div id=&quot;main&quot;&gt;
  31.    ...
  32. &lt;/div&gt;
  33. &lt;script src=&quot;jquery.js&quot;&gt;
  34. &lt;/script&gt;
  35. &lt;script type=&quot;text/javascript&quot;&gt;
  36. $(window).load(function() {
  37.     $('#preloader').fadeOut('slow');
  38.     $('body').css({'overflow':'visible'});
  39. })
  40. &lt;/script&gt;
  41. &lt;/body&gt;
  42. &lt;/html&gt;

Pueden ver el ejemplo funcionando en: http://samples.unijimpe.net/html-preloader/. Obviamente este es un precargador básico pero que cumple con lo necesario para mostrar al usuario una precarga.

Les dejo los archivos para que puedan hacer sus pruebas: cambiando el color de fondo o cambiando la imágen de precarga, todo depende de su creatividad y de gráfica que desean utilzar.

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/precargar-tu-pagina-con-jquery-y-css/feed/ 3 http://blog.unijimpe.net/precargar-tu-pagina-con-jquery-y-css/
Detectar si un usuario ha hecho Like en Facebookhttp://feedproxy.google.com/~r/unijimpe/~3/YoBjqKh4dMw/ http://blog.unijimpe.net/detectar-si-un-usuario-ha-hecho-like-en-facebook/#comments Tue, 06 May 2014 05:23:26 +0000 http://blog.unijimpe.net/?p=1376 En este artículo explicamos como detectar con PHP si un usuario ha hecho “Like” o “Me Gusta” en una página en Facebook, esto sirve para mostrar información diferente a los visitantes si es que son seguidores …

]]>
En este artículo explicamos como detectar con PHP si un usuario ha hecho “Like” o “Me Gusta” en una página en Facebook, esto sirve para mostrar información diferente a los visitantes si es que son seguidores de nuestra página en Facebook.

Cada vez que uno carga un “Page Tab” este carga el contenido de nuestra página en un iframe y para mantener la comunicación Facebook le pasa el parámetro signed_request, veamos que contiene utilizando código PHP:

  1. print_r($_REQUEST[&quot;signed_request&quot;]);

El cual devuelve el siguiente resultado:

  1. iP42q6CeqojKjTV8XSWFcbaShHFtqqreb93rPz2Byew.eyJhbGdvcml0aG0iOiJITUFDLVNI
  2. QTI1NiIsImlzc3VlZF9hdCI6MTM5OTM1MjE0OSwicGFnZSI6eyJpZCI6IjU3MjY5NzYyNDYw
  3. IiwibGlrZWQiOnRydWUsImFkbWluIjp0cnVlfSwidXNlciI6eyJjb3VudHJ5IjoicGUiLCJs
  4. b2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19

Como podemos el resultado está codificado y no se puede entender a simple vista. Pero gracias a las multiples contribuciones de los desarrolladores en internet, tenemos la función parse_signed_request que sirve para decodificar esta información.

  1. function parse_signed_request($request) {
  2.     list($sig, $pay) = explode('.', $request, 2);
  3.     $data = json_decode(base64_decode(strtr($pay, '-_', '+/')), true);
  4.     return $data;
  5. }

Utilizando esta función para decodificar la información que viene de Facebook:

  1. $fbdata = parse_signed_request($_REQUEST[&quot;signed_request&quot;]);
  2. print_r($fbdata);

Este código devuelve el siguiente resultado:

  1. Array
  2. (
  3.     [algorithm] =&gt; HMAC-SHA256
  4.     [issued_at] =&gt; 1399352590
  5.     [page] =&gt; Array
  6.         (
  7.             [id] =&gt; 57269762460
  8.             [liked] =&gt; 1
  9.             [admin] =&gt; 1
  10.         )
  11.     [user] =&gt; Array
  12.         (
  13.             [country] =&gt; pe
  14.             [locale] =&gt; en_US
  15.             [age] =&gt; Array
  16.                 (
  17.                     [min] =&gt; 21
  18.                 )
  19.         )
  20. )

Ahora si podemos identificar que el resultado devuelto es un array el cual contiene un parámetro llamado liked que contiene el valor de “1” cuando se ha dado like a la página o vacío cuando no se ha dado like a la página.

Finalmente en base a toda la información podemos detectar si un usuario le ha dato like a una página:

  1. function parse_signed_request($request) {
  2.     list($sig, $pay) = explode('.', $request, 2);
  3.     $data = json_decode(base64_decode(strtr($pay, '-_', '+/')), true);
  4.     return $data;
  5. }
  6.  
  7. $fbdata = parse_signed_request($_REQUEST[&quot;signed_request&quot;]);
  8.  
  9. if ($fbdata[&quot;page&quot;][&quot;liked&quot;] == 1) {
  10.     echo &quot;LIKED&quot;;
  11. } else {
  12.     echo &quot;NO LIKED&quot;; 
  13. }

Para los usuarios que necesitan todo terminado les dejo el archivo con el ejemplo básico para descarga.

© 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/detectar-si-un-usuario-ha-hecho-like-en-facebook/feed/ 3 http://blog.unijimpe.net/detectar-si-un-usuario-ha-hecho-like-en-facebook/
Seguimiento de enlaces externos con Google Analyticshttp://feedproxy.google.com/~r/unijimpe/~3/VZtWj1vngKE/ http://blog.unijimpe.net/seguimiento-de-enlaces-externos-con-google-analytics/#comments Mon, 16 Jul 2012 04:06:24 +0000 http://blog.unijimpe.net/?p=1321 Al implementar una página es importante conocer el comportamiento de los usuarios al visitar nuestra web, cuales son las páginas mas visitadas, cuantas veces se ha completado un formulario, entre otros. Ello nos permitirá detectar y …

]]>
Al implementar una página es importante conocer el comportamiento de los usuarios al visitar nuestra web, cuales son las páginas mas visitadas, cuantas veces se ha completado un formulario, entre otros. Ello nos permitirá detectar y hacer los ajustes necesarios para mejorar la experiencia del usuario en nuestra página.

Seguimiento de Enlaces salientes

Los enlaces externos o salientes son los enlaces a webs externas, conocer a que páginas se van los usuarios nos permitirá detectar que buscan los usuarios así como las páginas de salida.

Para hacer el seguimiento necesitamos incluir el código de seguimiento de Google Analytics, si aún no lo han hecho pueden leer Tips para incluir el código de Google Analytics.

Seguimiento de Enlaces salientes con Javascript

Si tenemos enlaces salientes, podríamos agregar una función que registre estos enlaces como un evento de Google Analytics. Creamos una función que registra un evento sobre la categoría ‘Outbound’.

  1. function trackLink(link) {
  2.     _gaq.push(['_trackEvent', 'Outbound', 'Click', link.href]);
  3. }

Luego cuando coloquemos algún enlace externo, utilizaremos la función recién declarada:

  1. <a href="http://www.google.com" onclick="trackLink(this);">Google</a>

Seguimiento de Enlaces salientes con jQuery

Si estamos utilizando jQuery, podemos aprovechar la potencia de los selectores, entonces podemos crear una rutina para detectar automáticamente todos los enlaces externos, le agregamos la propiedad target para que el enlace abra en ventana nueva y posteriormente registrarlo como un evento de Google Analytics.

  1. $('a').each(function(e) {
  2.     var _this = this;
  3.     if (_this.hostname && _this.hostname !== location.hostname) {
  4.         $(_this).attr('target', '_blank').bind('click keypress', function(event) {
  5.             var code = event.charCode || event.keyCode;
  6.             if (!code || (code && code == 13)) {
  7.                 var fixLink = _this.href;
  8.                 fixLink = fixLink.replace(/https?:\/\/(.*)/, "$1");
  9.                 _gaq.push(['_trackEvent', 'Outbound', 'Click', fixLink]);
  10.             };
  11.         });
  12.     };
  13. });

Este código lo agregamos a todas las páginas y con ello registraremos todos las veces que los usuarios han salido de nuestra página hacia un enlace externo.

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-enlaces-externos-con-google-analytics/feed/ 17 http://blog.unijimpe.net/seguimiento-de-enlaces-externos-con-google-analytics/
Tips para incluir el código de Google Analyticshttp://feedproxy.google.com/~r/unijimpe/~3/o4oevc63iJY/ http://blog.unijimpe.net/tips-para-incluir-el-codigo-de-google-analytics/#comments Mon, 07 May 2012 01:16:18 +0000 http://blog.unijimpe.net/?p=1318 Incluir el código de Google Analytics para registrar las visitas de nuestras páginas es una de las tareas mas comunes para todo desarrollador web, veamos algunos tips embeber el código de Google Analytics.

Código básico de

]]>
Incluir el código de Google Analytics para registrar las visitas de nuestras páginas es una de las tareas mas comunes para todo desarrollador web, veamos algunos tips embeber el código de Google Analytics.

Código básico de Google Analytics

Actualmente se recomienda el uso de la versión asíncrona de Google Analytics, esto hace que la carga del archivo javascript se haga sin afectar la carga de nuestra pagina. Para ello colocamos el siguiente código justo antes de cerrar el tag <head>, en donde UA-XXXXX-Y es el identificador de la pagina que vamos a seguir.

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

Este código también se puede colocar antes de cerrar la etiqueta <body>, pero si el usuario cierra la pagina antes que se haya completado la carga, entonces es probable que no se registre la visita.

Dos identificadores de seguimiento en una página

Si por algún motivo necesitamos que una pagina tenga dos identificadores diferentes, no se puede duplicar el código anterior pues Google Analytics solo permite un código de seguimiento por pagina. Entonces para utilizar dos identificadores podemos utilizar el método _gaq.push el cual permite enviar múltiples instrucciones, luego tendríamos:

  1. _gaq.push(['_setAccount', 'UA-XXXXX-1']);
  2. _gaq.push(['_trackPageview']);
  3. _gaq.push(['b._setAccount', 'UA-XXXXX-2']);
  4. _gaq.push(['b._trackPageview']);

Donde hemos colocado los dos identificadores que deseamos seguir. Ademas se observa recibe como parámetros un serie a arrays, por lo que también podríamos utilizar:

  1. _gaq.push(
  2.   ['_setAccount', 'UA-XXXXX-1'],
  3.   ['_trackPageview'],
  4.   ['b._setAccount', 'UA-XXXXX-2'],
  5.   ['b._trackPageview']
  6. );

Un identificador de seguimiento para varios Dominios

Si queremos utilizar un mismo identificador para diferentes dominios (Por ejemplo si tenemos una pagina y la tienda esta alojada en otro servidor), podemos emplear el siguiente método donde your-domain.com el el dominio donde estas insertando el código:

  1. _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  2. _gaq.push(['_setDomainName', 'your-domain.com']);
  3. _gaq.push(['_setAllowLinker', true]);
  4. _gaq.push(['b._trackPageview']);

Adicionalmente para hacer el seguimiento de los enlaces es necesario agregar a cada enlace una llamada para registrar las llamadas a los enlaces.

  1. <a href="http://other-site.com/intro"
  2. onclick="_gaq.push(['_link', 'http://other-site.com/intro.html']); return false;">Intro</a>

Seguimiento de Descargas

Si deseamos registrar las descargas de archivos que se hacen en nuestro site (.zip, .pdf, .avi, etc) es necesario agregar un codigo javascript a cada enlace que apunte a este tipo de archivos.

Podemos utilizar la función _trackPageview el cual crea una estructura de directorio virtual en los reportes de Google Analytics.

  1. _gaq.push(['_trackPageview', '/virtual-path-to-file']);

Entonces para registrar las descargas, modificamos los enlaces de la siguiente forma:

  1. <a href="report.pdf"
  2. onclick="_gaq.push(['_trackPageview', '/downloads/report.pdf']); return false;">Reporte</a>

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-incluir-el-codigo-de-google-analytics/feed/ 11 http://blog.unijimpe.net/tips-para-incluir-el-codigo-de-google-analytics/
SEO Parser: Analizar contenido SEOhttp://feedproxy.google.com/~r/unijimpe/~3/xKzplvGKs9Y/ http://blog.unijimpe.net/seo-parser-analizar-contenido-seo/#comments Fri, 25 Nov 2011 02:50:18 +0000 http://blog.unijimpe.net/?p=1307 SEO Parser es una herramienta que permite analizar como interpretan los buscadores el contenido de una web, para ello elimina los bloques que no son interpretados por los buscadores (Javascript, Flash, Vídeos, Applets, etc) mostrando solo …

]]>
SEO Parser es una herramienta que permite analizar como interpretan los buscadores el contenido de una web, para ello elimina los bloques que no son interpretados por los buscadores (Javascript, Flash, Vídeos, Applets, etc) mostrando solo el contenido basado en texto HTML, además de ello hace un análisis de los enlaces y una previsualización de la página en los resultados de Google.

SEO Parser esta basado en las diferentes reglas que aplican los buscadores al contenido y a los enlaces, estas reglas están detalladas en el libro The Art of SEO: Mastering Search Engine Optimization (Theory in Practice).

Para utilizar SEO Parser solo hace falta ingresar el URL del enlace que se desea analizar y devolverá como resultado una página con los resultados de: análisis de contenido, análisis de enlaces, análisis de imágenes y una previsualización en los resultados de Google.

Análisis de Contenido

SEO Parser elimina los bloques que no son visibles a los buscadores (Javascript, Flash, Vídeos, Applets, etc) por lo cual solo muestra el contenido basado en texto HTML.

Adicionalmente muestra las etiquetas de cabecera (h1, h2, h3, h4, h5, h6) que permiten definir el nivel de importancia del contenido. Por ejemplo el titulo de todo el contenido (h1), el titulo de cada sección (h2) y así sucesivamente.

Análisis de Enlaces

Todos los enlaces dentro de la página se analizan y muestran en diferentes colores para diferenciarlos. Para ello se agrupan en cuatro tipo de enlaces.

  • Enlaces Internos, son enlaces naturales y permiten posicionar secciones internas de un web.
  • Enlaces Externos, son enlaces a otros dominios y mejoran el posicionamiento del dominio de destino.
  • Enlaces No Follow, son enlaces que no pasan ningún beneficio de posicionamiento.
  • Enlaces Javascript, son enlaces creados con javascript o anchors los cuales son invisibles para los buscadores.

Análisis de Imágenes

Los buscadores no pueden interpretar el contenido de las imágenes, pero tienen una señal de lo que contienen gracias a la propiedad alt o en su defecto por el nombre del archivo de la imagen. SEO Parser reemplaza las imágenes por el texto Alt y si no existe por el nombre del archivo. Esto permite distinguir rápidamente si hace falta la propiedad alt a nuestras imágenes.

Previsualizar en Google

SEO Parser toma los datos del title y description o en su defecto el contenido filtrado de la página para simular como se mostrará la página en los resultados de Google. De esta forma identificaremos rápidamente como se verá nuestra página en Google.

Adicionalmente se muestra en detalle todos los metatags que contiene la página así como un resumen de las cantidades de enlaces, imágenes e incluso el tamaño del archivo leído.

Finalmente ofrece documentación acerca de las reglas que aplica al contenido, también tiene un formulario de feedback donde pueden enviar sus sugerencias, errores y comentarios para mejorar esta herramienta.

© 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/seo-parser-analizar-contenido-seo/feed/ 20 http://blog.unijimpe.net/seo-parser-analizar-contenido-seo/
Como utilizar Transiciones con CSShttp://feedproxy.google.com/~r/unijimpe/~3/veUjXRRu62w/ http://blog.unijimpe.net/como-utilizar-transiciones-con-css/#comments Sun, 06 Nov 2011 22:15:53 +0000 http://blog.unijimpe.net/?p=1303 Las Transiciones con CSS o CSS Transitions permiten realizar cambios en los valores de una propiedad durante un determinado tiempo de manera progresiva, esto permite realizar transiciones en las propiedades de un elemento eliminando la necesidad …

]]>
Las Transiciones con CSS o CSS Transitions permiten realizar cambios en los valores de una propiedad durante un determinado tiempo de manera progresiva, esto permite realizar transiciones en las propiedades de un elemento eliminando la necesidad de utilizar Javascript y obteniendo efectos interesantes.

Sintaxis de las Transiciones con CSS

En la especificación del CSS3 se introduce la nueva propiedad transition la cual permite especificar las transiciones con CSS, la sintaxis básica es:

  1. .style {
  2.    transition: property time easing;
  3. }

Donde se tiene:

  • property: propiedad a aplicar la transición (color, width, etc).
  • time: tiempo de duración expresado en segundos de la transición.
  • easing: tipo de aceleración de la animación (ease, linear, ease-in, ease-out, ease-in-out).

Obviamente este código solo funciona en navegadores que tienen implementada la especificación CSS3, entonces para que los navegadores actuales puedan interpretarlo hace falta agregar líneas especificas de acuerdo a cada navegador.

  1. .style {
  2.     -webkit-transition: property time easing; /* Safari 3.2+, Chrome */
  3.     -moz-transition: property time easing;    /* Firefox 4.0+ */  
  4.     -o-transition: property time easing;      /* Opera 10.5+ */
  5.     transition: property time easing;
  6. }

Esto garantiza que las transiciones se verán correctamente en Chrome, Safari 3.2+, Firefox 4.0+ y Opera 10.5+. En los otros casos (incluyendo Internet Explorer) no se verá la transición solo se verá un cambio brusco entre uno y otro estado.

Ejemplo básico de Uso

Una vez que conocemos la sintaxis, veamos un ejemplo en el cual al pasar el mouse sobre un enlace cambiaremos el color del enlace pero con una pequeña transición del color.

Para comenzar el rollover de un enlace se hace mediante:

  1. a {
  2.     color: #06C;
  3. }
  4. a:hover {
  5.     color: #C00;
  6. }

Luego aplicamos la transición al color durante 0.35 segundos, con lo cual tendríamos:

  1. a {
  2.     color: #06C;   
  3.     -webkit-transition: color .35s ease-out;  
  4.     -moz-transition: color .35s ease-out;  
  5.     -o-transition: color .35s ease-out;
  6.     transition: color .35s ease-out;
  7. }
  8. a:hover {
  9.     color: #C00;
  10.     -webkit-transition: color .35s ease-in;  
  11.     -moz-transition: color .35s ease-in;  
  12.     -o-transition: color .35s ease-in;
  13.     transition: color .35s ease-in;
  14. }

Como se aprecia hemos aplicado la transición sobre la propiedad color el cual durará 0.35 segundos, además hemos aplicado la transición cuando el mouse pasa sobre el enlace y cuando sale del mismo.

Ejemplo de Menú con CSS Transitions

Como segundo ejemplo crearemos un menú de navegación, en el cual cuando el cursor pasa sobre el elemento cambiaremos el color y el ancho del fondo con lo cual obtendremos un resultado interesante. Para ello primero creamos el código HTML para los elementos del menú.

  1. <ul class="menu">
  2.     <li>Home</li>
  3.     <li>Productos</li>
  4.     <li>Ofertas</a></li>
  5.     <li>Contactenos</a></li>
  6. </ul>

Luego, creamos la hoja de estilos en el cual definimos primero las propiedades del elemento de menú y también las propiedades del elemento esta en rollover.

  1. .menu li {
  2.     list-style: none;
  3.     padding: 0 0 0 10px;
  4.     width: 200px;
  5.     color: #fff;
  6.     background: #6CF;
  7.    
  8.     -webkit-transition: all .35s ease-in;  
  9.     -moz-transition: all .35s ease-in;  
  10.     -o-transition: all .35s ease-in;
  11.     transition: all .35s ease-in;
  12. }
  13. .menu li:hover {
  14.     background: #06F;
  15.     width: 220px;
  16.    
  17.     -webkit-transition: all .35s ease-out;  
  18.     -moz-transition: all .35s ease-out;  
  19.     -o-transition: all .35s ease-out;
  20.     transition: all .35s ease-out;
  21. }

Notese que hemos utilizado all como propiedad, lo cual indica que se debe hacer la transición sobre todos las propiedades del elemento. Pueden ver el ejemplo funcionando en CSS Transitions Demo.

Ahora solo queda a la creatividad para lograr efectos destacables, por ejemplo en Original Hover Effects with CSS3 pueden ver una lista de ejemplos muy vistosos de rollover utilizando CSS Transitions.

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/como-utilizar-transiciones-con-css/feed/ 8 http://blog.unijimpe.net/como-utilizar-transiciones-con-css/
Inserta cualquier tipografía en tu web con @font-facehttp://feedproxy.google.com/~r/unijimpe/~3/7NSSrUHf55A/ http://blog.unijimpe.net/inserta-cualquier-tipografia-en-tu-web-con-font-face/#comments Wed, 02 Nov 2011 04:10:34 +0000 http://blog.unijimpe.net/?p=1300 @font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10

]]>
@font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). De esta forma ya no estaremos restringidos a utilizar las fuentes clásicas en nuestras páginas y tampoco hace falta utilizar librerías javascript, flash o imágenes para obtener los mismos resultados.

Sintaxis Básica

El uso de esta propiedad es sencilla, para ello hay que definir un nombre y la ruta donde se encuentra el archivo de la fuente. Por ejemplo en el siguiente código vamos a utilizar la fuente helveticaneue_light.ttf la cual está ubicada en la carpeta fonts y que la nombramos como “HelveticaNeueLight” para utilizarlo posteriormente.

  1. @font-face {
  2.     font-family: 'HelveticaNeueLight';
  3.     src: url('fonts/helveticaneue_light.ttf') format("truetype");
  4.     font-style: normal;
  5.     font-weight: normal;
  6. }

Luego para utilizar esta fuente recién declarado lo hacemos mediante la propiedad font-family en donde le pasamos el nombre que hemos definido anteriormente.

  1. h3 {
  2.     font-family: 'HelveticaNeueLight';
  3.     font-size: 18px;
  4.     color: #F36;
  5. }

Sintaxis Completa

Lamentablemente no todos los navegadores aceptan el mismo formato de archivo para las fuentes, por ello existe una sintaxis mas compleja la cual asegura mayor compatibilidad con los navegadores. En donde se requiere tener las fuentes en diferentes formatos: .eot, .woff, .ttf y .svg.

  1. @font-face {
  2.     font-family: 'HelveticaNeueLight';
  3.     src: url('../fonts/helveticaneue_light.eot');
  4.     src: url('../fonts/helveticaneue_light.eot?#iefix') format('embedded-opentype'),
  5.          url('../fonts/helveticaneue_light.woff') format('woff'),
  6.          url('../fonts/helveticaneue_light.ttf') format('truetype'),
  7.          url('../fonts/helveticaneue_light.svg#HelveticaNeueLight') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }

Como convertir las fuentes

Si no tenemos las fuentes en todos los formatos antes mencionados, existe un servicio gratuito @font-face Generator que permite hacer la conversión a todos los formatos necesarios para la máxima compatibilidad.

Seleccionan la fuente y esta devolverá un archivo zip que contiene las fuentes en los formatos necesarios así como el código CSS necesario para colocarlo en nuestra hoja de estilos.

Como obtener las fuentes

La mayoría de las fuentes tienes derechos de autor asi que no las podremos utilizar a menos que tengamos la licencia de uso. Pero también existen fuentes gratuitas, para descargar estas fuentes existen dos páginas con gran variedad de tipografías.

Para finalizar les dejo los archivos fuente con un ejemplo de uso de fuentes utilizando @font-face.

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/inserta-cualquier-tipografia-en-tu-web-con-font-face/feed/ 9 http://blog.unijimpe.net/inserta-cualquier-tipografia-en-tu-web-con-font-face/
Seguimiento de descargas con Google Analyticshttp://feedproxy.google.com/~r/unijimpe/~3/TFKXsQ2mn8Q/ http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/#comments Mon, 31 Oct 2011 02:48:19 +0000 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/ 5 http://blog.unijimpe.net/seguimiento-de-descargas-con-google-analytics/
Manejo de sesiones en PHPhttp://feedproxy.google.com/~r/unijimpe/~3/tmOyOM__poM/ http://blog.unijimpe.net/manejo-de-sesiones-en-php/#comments Sun, 30 Oct 2011 03:42:50 +0000 http://blog.unijimpe.net/?p=1297 Las sesiones en PHP son una forma de mantener ciertos datos de un visitante entre los diversos accesos una web. De esta forma se pueden crear aplicaciones donde se le muestra al usuarios datos personalizados de …

]]>
Las sesiones en PHP son una forma de mantener ciertos datos de un visitante entre los diversos accesos una web. De esta forma se pueden crear aplicaciones donde se le muestra al usuarios datos personalizados de acuerdo a las preferencias o acciones del usuario.

Las sesiones se manejan internamente por un identificador llamado SID (Session ID) el cual esta asociado a una única sesión y que ayuda a identificar el contenido de la sesión actual. Esta variable se propaga automaticamente a traves de Cookies o mediante URL.

Manejo de sesiones en PHP

Todas la variables de sesión son accesibles mediante arrays en la variable global $_SESSION. Adicionalmente ofrece una serie de funciones que permiten manejar detalladamente las sesiones de manera sencilla:

  • session_start inicializa una sesión y crea el identificador de sesión.
  • session_id devuelve el identificador de la sesión actual.
  • session_regenerate_id genera un nuevo identificador para la sesión actual.
  • session_unset limpia todas la variables de sesión registradas.
  • session_destroy elimina todas la variables de sesión registradas.

Crear variables de Sesión

Si deseamos crear variables de sesión para que se puedan utilizar a través de diferentes páginas inicializamos el manejo de sesiones con al función session_start y luego guardamos el dato deseado como variable de sesión utilizando la variable global $_SESSION.

  1. // home.php
  2. session_start();
  3. $_SESSION["country"] = "Peru";

Podríamos mejorar el código si verificamos la existencia de la variable de sesión, si no existe entonces le asignamos un valor.

  1. // home.php
  2. session_start();
  3. if (!isset($_SESSION["country"])) {
  4.     $_SESSION["country"] = "Peru"; 
  5. }

Recuperar variables de Sesión

En las páginas siguientes podríamos acceder a las variables de sesión utilizando:

  1. // user.php
  2. session_start();
  3. echo $_SESSION["country"];

Podríamos utilizar las variables de sesión para verificar si se han hecho acciones previas por parte del usuario, como haber seleccionado tu país por ejemplo si aún no lo ha hecho lo redireccionamos a la página inicial.

  1. // user.php
  2. session_start();
  3. if (!isset($_SESSION["country"])) {
  4.     header("Location: home.php");  
  5. }
  6. echo $_SESSION["country"];

Eliminando datos de sesión

Si deseamos eliminar una determinada variable de sesión le asignamos un valor vacío.

  1. // clear.php
  2. session_start();
  3. $_SESSION["country"] = "";

Ahora si deseamos eliminar todas las variables de sesión lo hacemos de la siguiente forma:

  1. // clear.php
  2. session_start();
  3.  
  4. session_unset();
  5. session_destroy();

Depurando Sesiones

Si se desea depurar las variables de sesión con sus respectivos valores se puede utilizar la función print_r.

  1. // debug.php
  2. session_start();
  3. print_r($_SESSION);

Para mas información acerca del manejo y de las funciones disponibles para el manejo de sesiones pueden leer PHP: Session Functions. Para concluir les dejo los archivos fuente de este artículo para que puedan 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/manejo-de-sesiones-en-php/feed/ 10 http://blog.unijimpe.net/manejo-de-sesiones-en-php/