unijimpe
Desarrollo Web, SEO, Adsense
Utilizar reCAPTCHA con PHP
Fecha: 3 February 2010, 7:38 pm


reCAPTCHA es un servicio gratuito que permite incluir validación mediante el uso de captcha a los formularios para prevenir el SPAM. Ademas sirve para digitalizar libros pues reCAPTCHA muestras dos palabras una para verificar el captcha y la otra es una imagen que no ha sido reconocida por los OCR y que nosotros la reconoceremos.

Utilizar reCAPTCHA

reCAPTCHA es gratuito y posee todo un API para integrarlo con cualquier proyecto. Para utilizarlo necesitas registrarte para obtener los codigos de valdación para utilizar el API. Una vez registrado tendrás dos códigos: Public Key y Private Key. Pueden utilizar directamente el API o pueden utilizar alguna de las librerías que ofrecen por ejemplo para PHP, ASP.NET, Python, Perl, etc.

En nuestro caso escogemos PHP y descargamos el archivo recaptcha-php-1.10.zip el cual contiene el archivo recaptchalib.php con los métodos necesarios para el uso de reCAPTCHA.

Incluir reCAPTCHA en el Formulario

Para utilizar la protección mediante captcha, es necesario incluir reCAPTCHA en nuestro formulario, para ello primero incluir el archivo recaptchalib.php, agregamos variables con los valores de nuestros key recién obtenidos.

  1. require_once('recaptchalib.php');
  2. $publickey = "6LdA4goAAAAAAOoJNAhYRlvfyrE-_zv6XrrUJjhkj";
  3. $privatekey = "6LdA4goAAAAAAF1tiVwumBvttvdhSx5qC6xUJjhkj";
  4. $error = null;

Ahora podremos utilizar la función recaptcha_get_html para mostrar el captcha.

  1. <form method="post">
  2.    <label for="username">Usuario</label><br />
  3.    <input name="username" type="text" class="casilla" id="username" /><br />
  4.    <label for="usermail">Email</label><br />
  5.    <input name="usermail" type="text" class="casilla" id="usermail" /><br />
  6.    <label for="usercheck">Verificaci&oacute;n</label><br />
  7.    <?php echo recaptcha_get_html($publickey, $error); ?>
  8.    <input type="hidden" name="action" value="register" />
  9.     <input type="submit" name="btsend" value="Enviar" />
  10. </form>

Validar el Captcha

Una ves que el formulario se ha enviado procedemos a verificar que el texto de captcha se ha ingresado correctamente en cuyo caso procesamos los datos del formulario de lo contrario mostramos un mensaje de error.

  1. if ($_POST['action'] == "register") {
  2.    $re_ip = $_SERVER["REMOTE_ADDR"];
  3.    $re_challenge = $_POST["recaptcha_challenge_field"];
  4.    $re_response = $_POST["recaptcha_response_field"];   
  5.    $re_valid = recaptcha_check_answer($privatekey, $re_ip, $re_challenge, $re_response);
  6.    
  7.    if ($re_valid->is_valid) {
  8.       // procesar registro
  9.    } else {
  10.       $error = $resp->error;
  11.    }
  12. }

Uniendo estos pasos en un archivo, obtendremos la protección anti-spam que estabamos buscando. Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/recaptcha/. También les dejo los archivos fuente para que puedan hacer sus pruebas, noten que deben colocar sus propios keys de validación.

Mas Información
Pueden personalizar reCAPTCHA o utilizarlo con cualquier otro lenguaje de programación, para ello pueden encontrar mas información en:

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


Optimización: Utilizar compresión Gzip
Fecha: 1 February 2010, 8:51 pm


Para optimizar la carga de una página web es necesario disminuir al máximo el número de peticiones o el tamaño de los archivos transmitidos. Para ayudar al ahorro de transferencia los servidores web han implementado formas de compresión, mediante la cual el contenido es comprimido antes de enviarlo al browser.

En la actualidad la mayoría de los browsers soportan dos formatos de compresión, ello lo podemos observar en los headers que envía el browser al hacer una petición. En la propiedad Accept-Encoding con dos valores:

  • gzip es un formato de compresión libre, desarrollado por el proyecto GNU, es el mas popular pues la mayoría de los browsers lo soportan, además ofrece un ahorro del 66% en promedio.
  • deflate menos efectivo que gzip pues ofrece un ahorro de 60%, uno de los pocos sitios que lo utiliza es msn.com.

Que archivos comprimir con GZIP

Es recomendable comprimir solo los archivos html, php, css, js y algunos otros archivos en formato texto. En el caso de archivos jpg, png, gif, pdf estos ya están comprimidos y aplicarle gzip puede incrementar el tamaño de los archivos e incluso el consume de CPU del servidor. Otra regla que hay que tener en cuenta es que se recomienda comprimir archivos de mas de 1Kb.

Utilizar GZIP con Apache 1.3

En el caso de Apache 1.3 la compresión gzip es manejada por el módulo mod_gzip. Para ello se pueden utilizar las sentencias mod_gzip_item_include para incluir archivos a comprimir y mod_gzip_item_exclude para excluir archivos. Luego editamos el archivo .htaccess e incluimos el siguiente código.

  1. <IfModule mod_gzip.c>
  2. mod_gzip_on Yes
  3. mod_gzip_item_include file \.html$
  4. mod_gzip_item_include file \.php$
  5. mod_gzip_item_include file \.css$
  6. mod_gzip_item_include file \.js$
  7.  
  8. mod_gzip_item_include mime ^application/javascript$
  9. mod_gzip_item_include mime ^application/x-javascript$
  10. mod_gzip_item_include mime ^text/.*
  11. mod_gzip_item_include handler ^application/x-httpd-php
  12.  
  13. mod_gzip_item_exclude mime ^image/.*
  14. </IfModule>

Utilizar GZIP con Apache 2.x

Para versiones de Apache 2.x la compresión es gestionada por el módulo mod_deflate (No confundir el nombre del módulo con la compresión, pues esta genera compresión gzip). Para comprimir los archivos podemos utilizar la sentencia AddOutputFilterByType de la siguiente forma:

  1. AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

En nuestro caso tenemos Apache 2.0.54 por lo cual aplicamos el segundo método. Hemos creados dos ejemplos uno sin compresión (http://samples.unijimpe.net/optimization/no-gzip/), en el cual podemos observar que toda la pagina tiene un tamaño de 135.4 Kb y demora en cargar 3.46 segundos.

Ahora si agregamos la compresión gzip (http://samples.unijimpe.net/optimization/gzip/) podemos observar una reducción significante en el tamaño de los archivos. Ahora toda la página tiene un tamaño de 38.8KB con lo cual hemos ahorrado un 71.3%.

Mas Información
Se puede habilitar la compresión con PHP e incluso controlar mas al detalle la compresión de los archivos, para ello les dejo algunos enlaces para encontrar mas información.

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


Optimización: Agregar Headers de Expiración
Fecha: 30 January 2010, 8:02 pm


Los Header de expiración son utilizados para indicar cuando expira un determinado archivo, en cuyo caso el mismo no es cargado nuevamente si es que aun no ha expirado. Entonces para archivos que no cambian comúnmente como las imágenes, vídeos, javascript, hojas de estilo podríamos agregarle headers de expiración con lo cual solo se cargarán la primera vez que accedemos a la pagina.

Para ello se pueden utilizar los headers: Expires que contiene la fecha en la cual expira el archivo y Cache-Control, se pueden agregar estos dos headers por separado pero si agregamos el Expires este agregará también el header Cache-Control.

Expiración Utilizando htaccess

Los servidores web Apache son muy versátiles y permiten configurar de forma sencilla los headers de expiración, para ello debes incluir las directivas en el archivo .htaccess. Para el caso de la expiración se puede utilizar ExpiresDefault, para ello tenemos las siguientes directivas de tiempo: years, months, weeks, days, hours, minutes, seconds.

Lo recomendables es colocar una expiración de 30 días para los archivos estaticos (jpg, png, gif, swf, js, css), entonces podríamos agregar el siguiente código:

  1. ExpiresActive On
  2. ExpiresDefault A0
  3.  
  4. # expiracion de 1 mes para archivos estaticos
  5. <FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
  6. ExpiresDefault "access plus 1 months"
  7. </FilesMatch>

Además de ello la expiración también se puede expresar en segundos, entonces modificando el ejemplo anterior tendríamos (30 dias = 60*60*24*30 = 2592000):

  1. ExpiresActive On
  2. ExpiresDefault A0
  3.  
  4. # expiracion de 1 mes para archivos estaticos
  5. <FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
  6. ExpiresDefault A2592000
  7. </FilesMatch>

Otra forma para agregar la expiración es el uso de la directiva ExpiresByType mediante la cual se le puede asignar tiempos diferentes dependiendo del tipo de archivo. Con esta directiva tendríamos el ejemplo anterior transformado en:

  1. ExpiresActive On
  2. ExpiresDefault A0
  3.  
  4. ExpiresByType image/gif A2592000
  5. ExpiresByType image/png A2592000
  6. ExpiresByType image/jpg A2592000
  7. ExpiresByType image/jpeg A2592000
  8. ExpiresByType text/css A2592000
  9. ExpiresByType text/javascript A2592000

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/optimization/expiration/, si utilizanFirebug para ver el trafico de red observarán como se cargan las imágenes la primera vez, las siguientes estas se leen del cache del browser. Les dejo los archivos de ejemplo con el .htaccess para cada ejemplo con el cual pueden hacer sus pruebas.

Expiración Utilizando PHP

PHP también es otra solución para agregar los headers de expiración. Para ello haremos uso de la función header. El formato del header de expiración en:

  1. header("Expires: Mon, 26 Jul 2010 05:00:00 GMT");

Creando dinámicamente la expiración, utilizando las funciones de fecha tendríamos un ejemplo con la expiración de 30 dias (60*60*24*30 = 30 dias expresados en segundos)

  1. header("Cache-Control: must-revalidate");
  2. header("Expires: ".gmdate ("D, d M Y H:i:s", time() + 60*60*24*30)." GMT");

Mas Información
Hemos presentado una breve explicación utilizando .htaccess y PHP, pueden tener mas información y conceptos mas desarrollados en:

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


Optimización: Reducir peticiones HTTP
Fecha: 25 January 2010, 7:30 pm


Una de las primeras reglas para aumentar la velocidad de carga de una web es reducir la cantidad de peticiones HTTP. Recordando lo comentado en Optimizar Carga de Paginas Web el 80% del tiempo se emplea en descargar los componentes de una pagina mientras que solo el 20% en cargar el HTML. Si logramos reducir al máximo la carga de componentes externos lograremos mejorar el rendimiento de nuestro web.

Combinar archivos CSS y JS

Si tenemos una pagina que carga múltiples archivos JS para lograr efectos e interactividad o tal vez utilizamos múltiples archivos CSS (Esto generalmente ocurre al utilizar librerías de terceros que vienen con sus archivos JS y CSS). Podríamos combinar todos los archivos JS y CSS con lo cual podríamos disminuir la cantidad de peticiones HTTP .

Por ejemplo si tenemos una página que carga múltiples archivos Javascript tendríamos un código de la forma:

  1. <link href="css/reset.css" rel="stylesheet" type="text/css" />
  2. <link href="css/style.css" rel="stylesheet" type="text/css" />
  3. <link href="css/cropper.css" rel="stylesheet" type="text/css" />
  4. <script src="js/prototype.js" type="text/javascript"></script> 
  5. <script src="js/builder.js" type="text/javascript"></script>
  6. <script src="js/effects.js" type="text/javascript"></script>
  7. <script src="js/dragdrop.js" type="text/javascript"></script>
  8. <script src="js/controls.js" type="text/javascript"></script>
  9. <script src="js/slider.js" type="text/javascript"></script>
  10. <script src="js/sound.js" type="text/javascript"></script>
  11. <script src="js/cropper.js" type="text/javascript"></script>

Uniendo todo el contenido CSS en un archivo y el contenido JS en un solo archivo podríamos tener el siguiente código:

  1. <link href="css/cropper-complete.css" rel="stylesheet" type="text/css" />
  2. <script src="js/cropper-complete.js" type="text/javascript"></script>

Utilizar Mapa de Imágenes

Si utilizas varias imágenes como enlaces, una solución es unir las imágenes y utilizar mapa de imágenes para los enlaces, entonces en lugar de cargar una imagen por cada enlace, cargaremos una sola imagen para todos los enlaces y utilizamos un mapa de imágenes. Por ejemplo podríamos tener un menú de la forma:

  1. <a href="home.php"><img src="home.gif" width="59" height="20" alt="Home" /></a>
  2. <a href="empresa.php"><img src="empresa.gif" width="59" height="20" alt="Empresa" /></a>
  3. <a href="productos.php"><img src="productos.gif" width="59" height="20" alt="Productos" /></a>
  4. <a href="servicios.php"><img src="servicios.gif" width="59" height="20" alt="Servicios" /></a>
  5. <a href="contacto.php"><img src="contacto.gif" width="59" height="20" alt="Contacto" /></a>

Uniendo las imágenes y reemplazando los enlaces por un mapa de imágenes se tendría:

  1. <img src="menu.gif" width="295" height="20" usemap="#map" />
  2. <map name="map">
  3.    <area shape="rect" coords="0,0,59,20" href="home.php" title="Home" />
  4.    <area shape="rect" coords="59,0,118,20" href="empresa.php" title="Empresa" />
  5.    <area shape="rect" coords="118,0,177,20" href="productos.php" title="Productos" />
  6.    <area shape="rect" coords="177,0,236,20" href="servicios.php" title="Servicios" />
  7.    <area shape="rect" coords="236,0,295,20" href="contacto.php" title="Contacto" />
  8. </map>

Uso de CSS Sprites

Si utilizamos botones con rollover es típico hacerlo con dos imágenes una para el estado normal y otra para el rollover. Una técnica llamada CSS Sprites consiste en utilizar una sola imagen como fondo que contenga todas las imágenes a utilizar y para hacer el efecto de cambio de imagen se cambia la posición de la imagen de fondo.

Entonces al combinar las imágenes logramos disminuir la cantidad de peticiones HTTP con el consiguiente ahorro en el tiempo de carga. Pueden leer mas acerca de como funcionan los CSS Sprites en CSS Sprites: Image Slicing’s Kiss of Death

Imágenes Inline

Otra forma de disminuir la cantidad de peticiones es incluir las imágenes pequeñas como texto en el HTML, para ello se convierte la imagen en base64 y se incluye como texto. Por ejemplo normalmente incluimos una imagen con el siguiente código:

  1. <img src="boton.gif" width="16" height="16" />

Convirtiendo la imagen en base64 podremos incluir la imagen sin llamar a un archivo externo de la siguiente forma:

  1. <img src="data:image/gif;base64,R0lGODlhEAAQAJEAAAAAAN3d3...XZ" width="16" height="16" />

Donde R0lGODlhEAAQAJEAAAAAAN3d3...XZ texto resumido, resultado de convertir la imagen en texto codificado en base64. Ahora para reemplazar esta imagen tenemos que codificar la imagen, esto lo podemos hacer con la función base64_encode de PHP, entonces el código PHP que imprime la imagen como texto sería:

  1. <img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("boton.gif")); ?>" width="16" height="16" />

Otra opción para convertir las imágenes en base64 es utilizar un convertidor online como por ejemplo Online Image to Base64 Converter. Hay que tener en cuenta que este método es recomendable para imágenes pequeñas de preferencia en formato GIF y menores a 100KB por que la codificación en base64 incrementa el tamaño del archivo.

Mas Información
Con estos pequeños cambios podemos incrementar la velocidad de carga de nuestra web. No son muy complejos de implementar y además no interfieren con el backend de la página web. Pueden encontrar mas información en:

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


Optimizar Carga de Paginas Web
Fecha: 28 December 2009, 9:16 pm


La optimización de los sitios web es un punto muy importante para mejorar el rendimiento de cualquier sitio web. Según el libro High Performance Web Sites: Essential Knowledge for Front-End Engineers de Steve Souders, basado en los estudios hechos por el equipo de optimización de Yahoo han llegado a definir una regla:

Sólo el 10-20% del tiempo de respuesta se utiliza en descargar el documento HTML.
El otro 80-90% está empleado en descargar todos los componentes en la página.

Esto significa que si logramos optimizar la carga de todos los elementos de la pagina web, tendríamos el 80% de la velocidad de carga bajo nuestro control, con el consiguiente aumento considerable en la velocidad de carga de una web.

Reglas para Optimización

Para acelerar la carga de las paginas web podemos seguir algunas reglas que hemos recopilado de Exceptional Performance de Yahoo y de Web Performance Best Practices de Google.

  • Reducir las peticiones HTTP
    Reduciendo la cantidad de elementos externos a nuestra página podemos reducir el tiempo de carga, para ello podemos combinar archivos JS, CSS, utilizar sprites para los botones, etc.
  • Agregar headers de Expiración
    Agregando los headers indicando cuando expiran los archivos evitaremos la carga innecesaria de archivos que ya han sido cargados.
  • Utilizar compresión Gzip
    Al comprimir los archivos con gzip antes de enviarlos al browser conseguiremos disminuir la cantidad de datos a transmitir.
  • Colocar los Estilos en el Header
    Se recomienda colocar los archivos de estilos en el header para que se carguen primero y renderear rápidamente el web.
  • Colocar los Scripts en el Footer
    Cuando se carga un archivo JS, este bloquea la carga de otros archivos hasta que se complete la carga, si el archivo JS es pesada hará que nuestra página se vea en blanco mientras se carga el Javascript.
  • Poner Javascript y CSS en archivos externos
    Al colocar en archivos externos los javascripts y hojas de estilos, en la primera vez cargaremos estos archivos y en la siguientes peticiones las leeremos del cache del browser.
  • Reducir las búsquedas DNS
    Se recomienda no utilizar varios dominios en la carga de los elementos del web, por cada dominio habrá un tiempo para resolver la dirección IP.
  • Minificar archivos Javascript y CSS
    Minificar es eliminar los espacios en blanco y los saltos de linea innecesarios, minificar ayuda a reducir el tamaño de los archivos.
  • Evitar las Redirecciones
    El hacer una redirección toma un tiempo para resolver el URL de destino, utilizar correctamente los tipos de redirecciones ayudará a mantener rápida la carga de nuestras paginas.
  • Configurar los eTags
    Los eTags se agregan en los header para indicar si el archivo se ha modificado, para ello se compara el valor del eTag guardado en el browser con el eTag del archivo en el servidor.
  • Remover Scripts duplicados
    Al eliminar los scripts duplicados conseguiremos disminuir la carga de nuestros archivos.
  • Optimizar las Imagenes
    Podemos optimizar las imágenes, para ello hay que escoger adecuadamente el formato del archivo de imagen para reducir el tamaño del archivo.
  • Utilizar dominios libre de Cookies
    Es recomendable colocar las imagenes, js y css en dominios que no utilizen cookies, esto ayudará a disminuir el trafico de contenido.

Herramientas para la Optimización

Existen herramientas que nos pueden ayudar a hacer un diagnostico del estado de optimización de nuestra página, ello nos dará una guia de lo que podemos optimizar para mejorar la velocidad de nuestra web.

  • Firebug
    Firebug es el complemento básico para todo desarrollador web, esta extensión permite ver todos los archivos que se cargan con la pagina y los tiempos de carga.
  • YSlow
    Este es una extensión para Firebug creada por Yahoo que permite hacer un diagnostico de la velocidad de carga de una pagina basado en reglas definidas por YSlow.
  • Page Speed
    Este plugin creado por Google permite diagnosticar que puntos de nuestra web podemos mejorar para acelerar la carga de nuestras paginas.

Mas Información
Hay mucha información y muy bien documentada de todas las formas para optimizar nuestras paginas.

En futuros posts desarrollaremos uno a unos los puntos mencionados para optimizar nuestras páginas, las pondremos en práctica y analizaremos algunos casos prácticos.

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


Publicar Videos de Youtube en Flash
Fecha: 3 December 2009, 8:53 pm


Compartir vídeos de Youtube es una tarea común y sencilla en HTML con el código que ofrece Youtube el cual se coloca en el código html. Veamos como publicar vídeos de Youtube en páginas hechas en Flash, para ello utilizaremos el API YouTube ActionScript 2.0 Player API Reference el cual brinda métodos para embeber los vídeos en Flash.

Cargando Videos de Youtube
Para cargar un vídeo de Youtube se debe cargar como si fuera un MovieClip normal, para ello se puede utilizar los métodos de la clase MovieClipLoader. Para la ruta de los vídeos se puede utilizar el URL: http://www.youtube.com/v/ID Donde ID es el identificador del vídeo que se desea visualizar. Entonces si tenemos un MovieClip llamado clip donde deseamos mostrar el vídeo tendríamos el siguiente código:

  1. var tload:MovieClipLoader = new MovieClipLoader();
  2. tload.loadClip("http://www.youtube.com/v/Jmhpy8c8hbw", clip);

El vídeo se carga correctamente pero con dimensiones de 480 x 385 pixels. Si deseamos cargar los vídeos con un tamaño especifico sin deformar el vídeo es necesario crear un detector de eventos para ejecutarlo cuando el player del video se ha cargado completamente.

  1. var tinte:Number;
  2. var tlist:Object = new Object();
  3. tlist.onLoadInit = function() {
  4.     tinte = setInterval(checkVideo, 250);
  5. }
  6. var tload:MovieClipLoader = new MovieClipLoader();
  7. tload.addListener(tlist);
  8. tload.loadClip("http://www.youtube.com/v/Jmhpy8c8hbw", clip);

Una vez que se ha cargado player de Youtube, utilizamos la función checkVideo que se encarga de verificar que el player, una ver cargado el player asignamos las dimensiones con el método setSize. Notar que al inicio hemos ocultado el player asignándole transparencia 0, al final después de haber redimensionado el player volvemos a mostrar el video cambiando la transparencia a 100.

  1. clip._alpha = 0;
  2.  
  3. var tinte:Number;
  4. var tlist:Object = new Object();
  5. tlist.onLoadInit = function() {
  6.     tinte = setInterval(checkVideo, 250);
  7. }
  8. var tload:MovieClipLoader = new MovieClipLoader();
  9. tload.addListener(tlist);
  10. tload.loadClip("http://www.youtube.com/v/Jmhpy8c8hbw", clip);
  11.  
  12. function checkVideo() {
  13.     if (clip.isPlayerLoaded()) {
  14.         clip.setSize(348, 278);
  15.         clip._alpha = 100;
  16.         clearInterval(tinte);
  17.     }
  18. }

Listo, tenemos nuestro vídeo cargado y con las dimensiones deseadas en Flash. Les dejo los archivos fuentes para que lo descarguen y hagan sus pruebas.

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


Disponibles Licencias de Sprytube
Fecha: 23 November 2009, 9:19 am


Sprytube, es un script creado en PHP que te permitirá tener tu propio sistema para buscar, reproducir y descargar vídeos de Youtube. La instalación es muy sencilla y tiene la facilidad para adaptar el diseño a tus propias necesidades pues tienes absoluto control del HTML, CSS y scripts PHP.

Características

  • Búsqueda de vídeos directamente en Youtube.
  • Reproducir vídeos Youtube utilizando un Player Personalizado.
  • Descarga de vídeos integrada (FLV, 3GP, MP4).
  • HTML con áreas reservadas para publicidad.
  • Puedes personalizar completamente el HTML.
  • API completo con los datos de los vídeos que se pueden extraer.
  • Optimizado para buscadores (Title, description, Keywords).
  • URL amigables utilizando MOD_REWRITE.
  • Uso de robots.txt para prevenir indexación innecesaria.
  • Soporte de Sitemaps para registrarlo en Google WebMaster Tools.
  • Facilidad para incluir archivos de seguimiento.

Requerimientos
Para el correcto funcionamiento de Sprytube necesitas tener la configuración adecuada en tu servidor:

  • PHP 4.2 o superior
  • Soporte para cURL
  • Soporte de Zend Optimizer
  • Soporte de .htaccess
  • Dominio para alojar el Script

Demo
Para ver el sistema funcionando con todas su características puedes visitar:
http://sprytube.unijimpe.net/demo/

Comprar Sprytube
Ahora puedes adquirir Sprytube e instalarlo rápidamente en tu servidor para ofrecer valor añadido a tu web. Al comprar una licencia de Sprytube podrás descargar todo el script e instalarlo en un dominio por tiempo ilimitado y tendrás acceso a las actualizaciones del script.

Para mayor información visita: http://sprytube.unijimpe.net

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


Optimiza JavaScript con Closure Tools
Fecha: 14 November 2009, 1:20 pm


Closure Tools es un conjunto de herramientas desarrolladas por Google para optimizar y depurar javascript para desarrollar aplicaciones web potentes y eficientes .

Closure Tools esta compuesto por:

  • Closure Compiler una herramienta para minimizar o compactar los archivos Javascript.
  • Closure Inspector que es un plugin para Firebug que permite depurar código javascript compactado
  • Closure Library una librería JS al estilo de Mootools o jQuery
  • Closure Templates es un sistema para crear dinámicamente templates html e interfaces de usuario reutilizables.

closure

Closure Compiler
De entre estas utilidades la que mas uso tiene a mi parecer es Closure Compiler para la aceleración de carga de nuestros archivos JS. Hay varias formas de utilizarlo, la primera es una versión online, para ello pueden acceder a http://closure-compiler.appspot.com/ en donde colocamos el código fuente original, primero verificará que no presente ningún error y luego generará la versión minificada.

closure-compiler

También podemos descargar la aplicación en un archivo compiler.jar el cual podemos ejecutar el línea de comandos para minificar rápidamente los archivos Javascript.

Una ves descargado el archivo compiler.jar y si tienes un archivo llamado functions.js podemos compactarlo con los siguiente comandos el cual devolverá un archivo llamado function-min.js.

  1. java -jar compiler.jar --js functions.js --js_output_file functions-min.js

Como pueden ver es muy sencillo de utilizar y podemos optimizar el tamaño de nuestros archivos JS el cual es un punto muy importante para acelerar la carga de nuestras webs.

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


Función dólar $() en Javascript
Fecha: 7 November 2009, 10:43 pm


La función dólar $() es una de las mas populares en Javascript por que permiten acceder a elementos del HTML de forma sencilla y utilizando poco código. Originalmente fue implementada en Prototype y ahora disponible en la mayoría de librerías como Mootools, jQuery.

Veamos como implementar nuestra propia función $, esto para evitar incluir librerías como Mootools, jQuery o Prototype las cuales tienes los cuales tienes funciones adicionales que en muchas ocaciones no vamos a utilizar, con ello disminuimos el tamaño de nuestros archivos html.

Función $() básica
El objetivo primario de esta función es la seleccionar elementos basados en un identificador, es decir un alias de la función getElementById, entonces podemos crear nuestra primera función dolar.

  1. function $(el) {
  2.     return document.getElementById(el);
  3. }

Función $() extendida
La función anterior permite seleccionar un sólo elemento, pero podemos extenderla para pasarle multiples parámetros y que nos devuelva un array con los elementos seleccionados, ello nos permitirá obtener y manipular múltiples elementos de forma rápida.

  1. function $() {
  2.     var elements = new Array();
  3.     for (var i = 0; i <arguments.length; i++) {
  4.         var element = arguments[i];
  5.         if (typeof element == "string") {
  6.             element = document.getElementById(element);
  7.         }
  8.         if (arguments.length == 1) {
  9.             return element;
  10.         }
  11.         elements.push(element);
  12.     }
  13.     return elements;
  14. }

Esta función recorre uno por uno los parámetros que se les pasa y va agregándolo a un array que posteriormente lo devuelve.

Como utilizar la función $
El uso es sencillo, por ejemplo si tenemos un formulario y deseamos verificar si el campo esta vacio podemos hacerlos de la siguiente forma:

  1. if ($('username').value == '') {
  2.    alert('Error: nombre de usuario vacio.');
  3. }

Personalmente utilizo la primera versión pues me permite seleccionar los elementos que necesito y ahorrando muchas línes de código comparado con el uso del método getElementById.

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


Libros gratis para aprender PHP
Fecha: 31 October 2009, 2:10 pm


PHP es el lenguaje mas popular para desarrollo web, en esta ocasión les presento una lista de libros gratuitos que pueden descargarse para aprender desde lo básico hasta técnicas avanzadas para crear aplicaciones utilizando Zend Framework que utiliza el patrón MVC para crear aplicaciones robustas en PHP.

PHP 5 Power Programming
Uno de los mejores libros sobre PHP 5, hace una introducción a las nuevas características que tiene PHP 5, un capitulo dedicado a las sintaxis de PHP, también hay capítulos sobre acceso a base de datos, rendimiento y optimización de código. Ofrece capitulos sobre OOP, diseño de patrones e integración con XML/SOAP.

php5-power-programming

Autores: Andi Gutmans, Stig Bakken, Derick Rethans
URL: PHP 5 Power Programming
Descarga: 013147149X_book.pdf

PHP Cookbook
Este libro tiene una colección de problemas, soluciones y ejemplos prácticos para programadores PHP. Se presenta una colección amplia de las mejores técnicas para problemas comunes del día a dia en el desarrollo de PHP. Contiene más de 250 funciones, que van desde tareas simples a programas completos que resuelven tareas complejas, como la impresión de tablas en HTML y la generación de gráficos de barras.

php-cookbook

Autores: Adam Trachtenberg, David Sklar
URL: PHP Cookbook

PHP Reference: Beginner to Intermediate PHP5
Este libro cuenta con una colección de 250 funciones PHP con explicaciones claras seguido de ejemplos para entender el uso y el funcionamiento de estas funciones. Además se ofrece numerosas sugerencias, conceptos básicos de PHP, ejemplos de consultas a MySQL, sintaxis de expresiones regulares.

php-reference-beginner-to-intermediate-php5

Autor: Mario Lurig
URL: PHP Reference: Beginner to Intermediate PHP5
Descarga: PHP Reference: Beginner to Intermediate PHP5

PHP Essentials
Este libro trata desde la historia de PHP, luego cubre los conceptos básicos del lenguaje, la programación orientada a objetos, gestión de archivos y carpetas, integración con base de datos MySQL y SQLite, procesamiento de formularios, manejo de cookies y sesiones. Todo con ejemplos prácticos de aplicación.

Autor: Techotopia
URL: PHP Essentials

Practical PHP Programming
En este libro encontrarás gran cantidad de información para los que recién se inician en PHP y a la vez presenta conceptos avanzados para los mas expertos. Presenta capítulos desde las sintaxis de PHP, pasando por conexión a base de datos, tips de seguridad y ejemplos prácticos.

Autor: Paul Hudson
URL: Practical PHP Programming

Zend Framework: Surviving The Deep End
Este libro cubre todos los aspectos del desarrollo de aplicaciones utilizando Zend Framework. Primero presenta una explicación detallada de Zend Frameword, el uso del patrón Modelo-Vista-Controlador (MVC) para el desarrollo de aplicaciones, un tutorial para aprender los principios básicos, luego como extender las clases existentes y finalmente como optimizar aplicaciones hechas en Zend Framework.

Autor: Pádraic Brady
URL: Zend Framework: Surviving The Deep End

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