unijimpe
Desarrollo Web, SEO, Adsense
SEO Parser: Analizar contenido SEO
Fecha: 24 November 2011, 6:50 pm

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.


Como utilizar Transiciones con CSS
Fecha: 6 November 2011, 2:15 pm

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.


Inserta cualquier tipografía en tu web con @font-face
Fecha: 1 November 2011, 9:10 pm

@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.


Seguimiento de descargas con Google Analytics
Fecha: 30 October 2011, 7:48 pm

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.


Manejo de sesiones en PHP
Fecha: 29 October 2011, 8:42 pm

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
  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
  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
  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
  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
  3. $_SESSION["country"] = "";

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

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
  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.


PHP con MySQL: Eliminar Registros en MySQL
Fecha: 11 October 2011, 9:42 pm

En artículos previos hemos explicado como interactuar con MySQL utilizando PHP, desde consultar, insertar y editar registros, ahora veremos como eliminar registros de manera sencilla. Si es que no has leído los artículos anteriores te recomiendo revisar:

Para eliminar registros seguiremos los siguientes pasos: primero haremos un listado de todos los registros de la tabla elegida, luego en el listado agregaremos un enlace a un archivo delete.php que se encargará de hacer la eliminación. Antes de eliminar el registro le preguntaremos al usuario si desea proceder con la eliminación. Finalmente eliminaremos el registro y redireccionaremos al usuario a listado de registros.

Crear el Listado de Registros

Para nuestro ejemplo utilizaremos la base de datos de ejemplo que contiene una tabla llamada empresa (Descargar el Script SQL). Creamos una consulta a la tabla 'empresa' y lo mostramos en una tabla HTML con un enlace a eliminar el registro.

  1. <?php
  2. // conexión a mysql
  3. require("conexion.php");
  4. require("funciones.php");
  5. // consulta de registros
  6. $query = "SELECT * FROM empresa ORDER BY nombre ASC";
  7. $queEmp = mysql_query($query, $conexion);
  8. ?>
  11. <title>Listado de Empresas</title>
  12. </head>
  15.   <?php while ($rsEmp = mysql_fetch_assoc($quEmp)) { ?>
  16.   <tr>
  17.     <td><?php echo $rsEmp['nombre']; ?></td>
  18.     <td><?php echo $rsEmp['direccion']; ?></td>
  19.     <td><a href="editar.php?id=<?php echo $rsEmp['id']; ?>">Editar</a></td>
  20.     <td><a href="#" onclick="delEmpresa(<?php echo $rsEmp['id']; ?>);">Eliminar</a></td>
  21.   </tr>
  22.   <?php } ?>
  23. </table>
  24. <script type="text/javascript">
  25. function delEmpresa(id) {
  26.     if (window.confirm("Aviso:\nDesea eliminar el registro seleccionado?")) {
  27.         window.location = "delete.php?action=del&id="+id;   
  28.     }
  29. }
  30. </script>
  31. </body>
  32. </html>

Hay que notar que en lugar de colocar un enlace directo a delete.php estamos llamando a una función Javascript delEmpresa, esta función le pregunta al usuario si esta seguro de eliminar el registro (Para evitar eliminar registros de manera accidental). Si el usuario acepta entonces redireccionamos a otra página donde pasamos el id del registro que deseamos eliminar.

Eliminar el registro

Creamos un archivo llamado delete.php el cual recibe dos parámetros: el identificador del registro un otro parámetro para verificar que acción se quiere realizar. Creamos la consulta para eliminar el registro y finalmente redireccionar al listado de registros.

  1. // file: delete.php
  2. require("conexion.php");
  3. require("funciones.php");
  4.  
  5. $idempresa = getParam($_GET["id"], "-1");
  6. $action = getParam($_GET["action"], "");
  7.  
  8. if ($action == "del") {
  9.     $sql = "DELETE FROM empresa WHERE id = ".sqlValue($idempresa, "int");
  10.     mysql_query($sql, $conexion);
  11.     header("location: listado.php");
  12. }

Notar que estamos utilizando dos funciones especiales:

  • getParam permite filtrar los datos enviados por el usuario y definir un valor por defecto (En el ejemplo si no se ha enviado el parámetro id devuelve como valor -1).
  • sqlValue permite formatear el tipo de dato que acepta la consulta (Por ejemplo se puede definir que el campo es entero int, si el usuario envía un cadena de texto esta función la convertirá a un entero).

Para finalizar les dejo los archivos con el código fuente que incluye el archivo de conexión y las funciones utilizadas en nuestro ejemplo.

© 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.


Controlar el redimensionado de textarea con CSS
Fecha: 25 September 2011, 8:19 pm

Los navegadores actuales (Safari, Chrome, Firefox) están implementando nuevas funcionalidades para facilitar al usuario la interacción con el contenido. Una de estas características es la habilidad de redimensionar de los áreas de texto o textarea. Ahora veremos como controlar estar características utilizando CSS.

CSS para controlar el redimensionado

El control del redimensionado de los textarea se puede hacer utilizando la propiedad CSS3 llamada resize la cual tiene las siguientes opciones: both, none, vertical, horizontal.

  1. textarea { resize:both; } /* reescalado horizontal y vertical */
  2. textarea { resize:none; } /* desactiva el reescalado */
  3. textarea { resize:vertical; } /* reescalado solo vertical */
  4. textarea { resize:horizontal; } /* reescaldo solo horizontal */

Adicionalmente se podría limitar las dimensiones del reescalado utilizando las propiedades: max-width, min-width, max-height y min-width.

Por ejemplo si deseamos que nuestro campo de texto solo se pueda redimensionar la altura y con un mínimo de 60px y un máximo de 300px de alto.

  1. textarea {
  2.    resize: vertical;
  3.    min-height: 60px;
  4.    max-height: 300px;
  5. }

Esta propiedad esta disponible en las ultimas versiones de Safari, Chrome y Firefox.

© 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.


Como incluir el botón Google +1 en tu Web
Fecha: 7 August 2011, 10:22 am

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.


Obtener thumbnails de los videos de Youtube
Fecha: 3 July 2011, 7:36 pm

Al crear webs que muestren vídeos de Youtube surge la necesidad de mostrar las imágenes del vídeos, esto para los usuarios que no tienen flash o para dispositivos móviles. Obtener estas imágenes es muy sencillo, solo hace falta tener el identificador del vídeo.

Obtener la ruta de las Imágenes

La ruta de las imágenes de los vídeos están basadas en el identificador del video que lo representamos como ID en nuestros ejemplos.

La imagen utilizada por defecto utilizada por Youtube es:

  1. http://img.youtube.com/vi/ID/default.jpg

Además se pueden obtener 4 imágenes adicionales, donde la primera es en alta calidad (480x360 pixels) y las siguientes en baja calidad (120x90 pixels).

  1. http://img.youtube.com/vi/ID/0.jpg
  2. http://img.youtube.com/vi/ID/1.jpg
  3. http://img.youtube.com/vi/ID/2.jpg
  4. http://img.youtube.com/vi/ID/3.jpg

Obtener las imágenes de Forma Manual

Lo primero que se necesita es el identificador del video, para ello nos fijamos en el URL del vídeo que deseamos e identificamos el parámetro GET con nombre v.

  1. http://www.youtube.com/watch?v=aDaOgu2CQtI

En el URL de ejemplo tendríamos el identificador del video: aDaOgu2CQtI. Luego de ello si deseamos mostrar la imágen por defecto tendríamos:

  1. <img src="http://img.youtube.com/vi/aDaOgu2CQtI/default.jpg" />

Obtener las Imágenes con PHP

Lo que necesitamos en este caso es crear una función que devuelva el identificador del vídeo para posteriormente utilizarlo en la creación del URL de la imagen. Entonces creamos una función llamada getYoutubeID que parsea el URL ingresado y obtiene el Identificador y si la ruta es invalida devuelve una cadena vacía.

  1. function getYoutubeID($url) {
  2.     $tube = parse_url($url);
  3.     if ($tube["path"] == "/watch") {
  4.         parse_str($tube["query"], $query);
  5.         $id = $query["v"];
  6.     } else {
  7.         $id = "";   
  8.     }
  9.     return $id;
  10. }

Finalmente podemos mostrar el thumbnail del video en alta calidad de la siguiente forma:

  1. <?php $url = "http://www.youtube.com/watch?v=aDaOgu2CQtI"; ?>
  2. <img src="http://img.youtube.com/vi/<?php echo getYoutubeID($url); ?>/0.jpg" />

Para finalizar he creado una página de ejemplo: PHP Youtube Image donde pueden ingresar el URL del vídeo y visualizar todas las imágenes disponibles. Tambíen les dejo el código fuente de este ejemplo para que lo pueden utilizar libremente.

© 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.


Smaller: Interfaz Gráfica para YUI Compressor en MAC
Fecha: 21 June 2011, 9:57 pm

Smaller es una interfaz gráfica para YUI Compressor en Mac, con esta herramienta podremos minificar múltiples archivos Javascript y CSS sin necesidad de utilizar línea de comandos. Es ideal para diseñadores que no necesitan aprender línea de comandos para minificar los archivos.

YUI Compressor

YUI Compressor el una herramienta desarrollada en Java que permite minificar (Elimina espacios en blanco, saltos de linea, reemplaza los nombres de variables por otras mas cortas) archivos Javascript y CSS para de esta forma acelerar la carga de nuestras páginas. Para comprimir o minificar un archivo con YUI Compressor se utiliza la siguiente sintaxis en linea de comandos:

  1. java -jar yuicompressor-2.1.1.jar myfile.js -o myfile-min.js

En donde myfile.js es el archivo que deseamos comprimir. De forma semejante se puede minificar archivos CSS.

Smaller

Si eres diseñador y te es complicado aprender la sintaxis en línea de comandos o deseas acelerar el proceso de minificar archivos, entonces Smaller te sacará de apuros pues es una interfaz gráfica para utilizar YUI Compressor en MAC. Con Smaller puedes arrastrar directamente los archivos hasta la ventana de Smaller y minificarlos rápidamente.

Puedes arrastrar varios archivos a la vez o incluso carpetas completas, además de ello tiene un panel de configuración para controlar al detalle el proceso de minificar archivos. En mi caso el proceso de minificar archivos que me demoraba 5 minutos ahora se ha reducido a 30 segundos!!!

Smaller tiene un costo de US$ 20.00 pero tiene una versión de prueba por 30 días. Adicionalmente se puede obtener un descuento del 25% en el precio para ello solo tienen que seguir en Twitter al creador @chenluois y publicar un tweet con el siguiente texto: Smaller - Batch Minify CSS and JavaScript on the Mac http://smallerapp.com.

Más 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.