Esta opción es muy interesante para realizar una optimización, ya que todo el código de la página se comprime, ocupando menos espacio, con la consecuencia de una velocidad más rápida, y también del ahorro de ancho de banda.

Grandes portales como Yahoo y Google utilizan esta técnica en sus sitios, de modo que nosotros también podríamos aprovecharlo. Solo por poner un ejemplo, en un momento la portada de Yahoo pesaba 150kb, pero al trabajar con la compresión se reduce a solo 30kb.

Vamos a lo interesante, ¿cómo hacerlo? Simplemente tenemos que configurar nuestro archivo .htaccess para que el servidor Apache pueda interpretar y proceder a comprimir el código. Veamos varias maneras de hacerlo.

Si queremos que el servidor comprima el código generado después del procesamiento de los scripts PHP, vamos a utilizar las siguientes dos líneas:

php_flag zlib.output_compression On
php_value zlib.output_compression_level 2

La primera línea le indica que se tiene que activar la compresión GZIP para los archivos PHP. La segunda línea indica el nivel de compresión del archivo (cuanto mayor sea el nivel, de 1 al 10) mayor será la compresión, pero también requerirá más tiempo de procesamiento el comprimir los archivos antes de enviarlos. Con una compresión a nivel 2 el nivel de compresión y el tiempo de procesamiento es lo suficientemente equilibrado.

Sin embargo, nuestro sitio no se compone únicamente de archivos PHP, también tenemos otros, de los cuales probablemente tengamos muchos, como los JS y CSS. Sobre todo los JS, que es muy común utilizar frameworks como Mootools o jQuery, aparte otros scripts más que van sumando KB en la transferencia. Veamos de que manera muy simple podemos configurar nuestro .htaccess para la compresión de estos archivos.

Con el siguiente código vamos a establecer que todos los archivos con extensión CSS serán comprimidos:

<Files *.css>
SetOutputFilter DEFLATE
</Files>

De la misma manera podemos utilizar un código similar para hacer lo propio con los archivos JS:

<Files *.js>
SetOutputFilter DEFLATE
</Files>

Existe una forma más para configurar la compresión por medio del comando AddOutputFilterByType DEFLATE tipo, que también es para el .htaccess, veamos unos ejemplos:

AddOutputFilterByType DEFLATE text/plain (comprime los archivos de texto plano)
AddOutputFilterByType DEFLATE text/html (comprime los archivos html)
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

Y para finalizar, probablemente se pregunten: “¿Cómo puedo saber si mi sitio ya está comprimiendo el contenido?”. Cómo este proceso es totalmente transparente para el usuario (efectivamente, al navegar no nos damos cuenta si el sitio está comprimido o no), la única manera que tenemos para conocer esto es examinando las cabeceras HTTP del sitio en cuestión. Si usamos el navegador FireFox, tenemos a nuestra disposición el complemento HttpLiveHeaders, o también el Web Developer Bar que nos permiten visualizar lo que necesitamos.

En esta cabecera el servidor web envía una variable informando si se realizó la compresión o no y, en el caso de que se haya comprimido, el formato con el que se codificó. Esta es la variable a buscar en la cabecera:

Content-Encoding: gzip

Espero que les sea de utilidad, y puedan empezar a utilizar esta ventaja de la compresión.

Articulos relacionados:

1. Añadir automáticamente links a los contenidos que se copian de tu sitio
2. Cómo saber si el destinatario leyó nuestro email?
3. Colocar nuestro logo en el Escritorio de WordPress

Primero debemos subir nuestra imagen, la cual no debe pesar mas de 1Mb y debe contener texto lo mas claro y nítido posible. Luego indicamos el lenguaje de detección (tenemos 32 idiomas para elegir), insertamos el CAPTCHA y clickeamos en Recognize.

Al cabo de unos instantes aparecerá nuestro texto plano listo para ser copiado y pegado en nuestro editor de textos favorito.

OnlineOCR

Articulos relacionados:

1. Cambiar texto por imagenes con Facelift
2. WP Smart Image: Uso eficiente de las imagenes para diseñar themes
3. Convertir imagenes a ASCII

Poseen 960px de ancho pero se los puede hacer funcionar en un estilo flexible o alterar el ancho fijo con facilidad. Es ideal para un inicio rápido de un proyecto, solo basta con copiar y pegar el código.

Primary Code

Articulos relacionados:

1. CSS Framework: El sistema de 960.gs
2. Grilla 960px PSD para el diseño de webs
3. Fuentes seguras para tu website

HTML

<div id="position:relative;">

		<!-- UP -->
		<div id="up"></div>

</div>

CSS

div#up {
 width:0px;
 height:0px;
 border-left:50px solid transparent;  /* left arrow slant */
 border-right:50px solid transparent; /* right arrow slant */
 border-bottom:50px solid #2f2f2f; /* bottom, add background color here */
 }

Lo que eso genera son grandes bordes y los segmentos perpendiculares quedan apuntando en una dirección, logrando con esto un triángulo apuntando en dirección opuesta al segmento que dimos color.

Si quisieramos tomar el ejemplo de arriba y lograr un triángulo que apunte hacia abajo, debemos reemplazar el border-bottom por border-top. Y todo esto en pocas líneas de código y sin utilizar ningún plugin. Impresionante!

Articulos relacionados:

1. Efecto de sombras con CSS3
2. Cómo recordar facil las propiedades acortadas CSS
3. Generadores CSS3 y otras herramientas

Instalar ApgForm

Primero deberemos descargar el archivo desde este link. Lo descomprimimos y subimos el archivo llamado apgform1.7.php a una carpeta en nuestro servidor. A dicha carpeta le asignamos permisos de escritura (CHMOD 777).

Deberemos subir un formulario web que será procesado por apgform1.7.php, este es un ejemplo básico para generar el form de la imagen anterior. Llamemos al archivo form.html y en su interior coloquemos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>APGFORM</title>
</head>
<body>
<form action="apgform1.7.php" method="post">
<label for="input_nombres">Nombre y Apellido</label>
<input id="input_nombres" type="text" name="nombres" value="" />
<br />
<br />
<label for="input_sexo">Sexo</label>
<select id="select_sexo" name="sexo">
<option value="M">Masculino</option>
<option value="F">Femenino</option>
</select>
<br /><br />
<label for="dni">DNI</label>
<input id="dni" type="text" name="dni" value="" />
<br /><br />
<label for="domicilio">Domicilio</label>
<input id="domicilio" type="text" name="domicilio" value="" />
<br /><br />
<label for="localidad">Localidad</label>
<input id="localidad" type="text" name="localidad" value="" />
<br /><br />
<label for="cp">Codigo Postal</label>
<input id="cp" type="text" name="cp" value="" />
<br /><br />
<label for="telefono">Telefono</label>
<input id="telefono" type="text" name="telefono" value="" />
<br /><br />
<input type="reset" name="reset" value="Limpiar" />
<input type="submit" name="submit" value="Enviar" />
</form>
</body>
</html>

Coloquemos el archivo dentro del mismo directorio que nuestro archivo apgform1.7.php. Ahora desde nuestro navegador insertemos la ruta para ver nuestro archivo form.html y llenemos los datos a modo de prueba.

Si todo marcha bien, desde nuestro cliente FTP deberemos observar que se generó un archivo form.xls

Al descargar el archivo form.xls vía FTP o navegador observarán los datos subidos a través del formulario.

El archivo apgform1.7.php puede ser editado para ajustarse mejor a nuestros requerimientos. Para modificar el nombre y la ruta del archivo en donde se guardan los datos, debemos buscar y modificar la siguiente línea:

$array['filename'] = "form.xls";    //Set the file to save the information in

Los archivos a los que es redirigido el usuario en los casos de error o de éxito al completar el formulario se configuran desde:

$success = "exito.html";
$error = "error.html";

Esperamos les sea de utilidad!

Articulos relacionados:

1. Recibir datos a través de un formulario y enviarlos vía mail en un PDF
2. Convertir PDF a WORD (.doc) o a Excel y recibirlo por email
3. Cómo insertar reCAPTCHA en tus formularios?

Este script es simple y no obstrusivo, además de ser totalmente compatible con todos los navegadores modernos. Su función es la de abrir una imagen en un contenedor nuevo con un agradable efecto que resalta la imagen en cuestión (demo en la página oficial). Es muy popular y se adaptó el script para su funcionamiento en foros, blogs, gestores de contenido en general y otros.

Instalar Lightbox 2 en un sitio web

1- Descargamos el script desde la sección downloads y lo descomprimimos.
2- Tomamos los tres directorios y los copiamos dentro de un directorio al que llamaremos scripts dentro de nuestro sitio web.
3- Incluimos el siguiente código entre etiquetas <head> </head> de la página en donde deseamos incluir el script.

<script type="text/javascript" src="scripts/js/prototype.js"></script>
<script type="text/javascript" src="scripts/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="scripts/js/lightbox.js"></script>

4- Entre etiquetas <body> </body>, en donde deseamos colocar nuestra imagen con efecto Lightbox, colocamos el link de la siguiente manera:

<a href="images/image-big.jpg" rel="lightbox" title="mi imagen"><img src="images/image-mini.jpg" alt="Imagen peque&ntilde;a"></a>

En nuestro ejemplo image-mini.jpg correspondería a la imagen pequeña en donde el usuario habrá de clickear. Image-big.jpg será la imagen grande que visualizará con el efecto Lightbox.

Con Lightbox 2 no solo podremos dar un efecto a nuestras imagenes por separado, sino que también nos permite manejar galerías de imagenes. Para tal caso debemos colocar el código de la siguiente manera:

<a href="images/image-big-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-mini-1.jpg" alt="Imagen peque&ntilde;a"></a>
<a href="images/image-big-2.jpg" rel="lightbox[roadtrip]"><img src="images/image-mini-2.jpg" alt="Imagen peque&ntilde;a"></a>
<a href="images/image-big-3.jpg" rel="lightbox[roadtrip]"><img src="images/image-mini-3.jpg" alt="Imagen peque&ntilde;a"></a>

De este modo habremos fabricado una galería con un buen efecto en nuestro sitio.

Por último, posiblemente deberemos adaptar algunas urls dentro del script para que se visualicen sus imagenes. Dentro de lightbox.js (líneas 49 y 50) están las rutas paraubicar la imagen loading.gif y closelabel.gif, deberían quedar de la siguiente manera:

LightboxOptions = Object.extend({
 fileLoadingImage:        'scripts/images/loading.gif',     
 fileBottomNavCloseImage: 'scripts/images/closelabel.gif',

Dentro de lightbox.css están las rutas para las imagenes prev.gif y next.gif, mas específicamente en las líneas 16 y 17.

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

Dependiendo de la ubicación que le des al script posiblemente no deban modificar ninguna de estas cuatro rutas, así que primero deberán probar la página en donde insertamos la imagen con el efecto lightbox para luego cambiar las rutas si fuera necesario.

Esperamos que les sea de utilidad!

Articulos relacionados:

1. Slider con tu contenido destacado de modo elegante
2. Plugins para imágenes usando jQuery en WordPress
3. Cambiar texto por imagenes con Facelift

Todos los años el popular sitio Smashing Magazine realiza un compilado con los mejores themes gratuitos para WordPress. En esta entrega suman 100 los themes seleccionados, con sus respectivos links a demos y descargas, y que se dividieron en las siguientes categorías:

• Galería y Portfolio
• Para el blogger
• e-Commerce
• Themes limpios
• Magazine
• Minimalistas
• Mobile
• Pre-launch
• y “Themes que llevan a WordPress mas allá…”

Si el theme que ustedes necesitan no está en este listado, te recomendamos que mires los themes premium de themeforest o bien que te animes a hacer tu propio theme.

Smashing Magazine

Articulos relacionados:

1. Themes de wordpress listos para tu diseño
2. Comenzar a crear Themes de WordPress
3. ¿Así que te gustaría diseñar tus themes WordPress?

Only CSS Menu es un sitio que nos permite obtener el código básico para distintos tipos de menú: horizontal, vertical, horizontal con lista desplegable, navegación paso a paso, basado en CSS3, paginación, y estilo Vista.

Aparte de estas opciones permite armar directamente online un menú personalizado horizontal (sin lista desplegable para sub-categorías), el cuál luego podemos descargar.

Sin duda una opción interesante para obtener una base rápida para nuestro diseño.

Articulos relacionados:

1. CSS 3.0 Maker

Para ello se vale de una imagen que servirá para el rastreo del email. Existen cuatro imagenes por defecto además de poder elegir una imagen en blanco para que pase desapercibida. Cada vez que el mismo sea abierto, la señal de rastreo permitirá que se nos envie un correo avisandonos de la acción. Por supuesto que esto sólo es posible con los clientes de correo que permitan html y que muestren la imagen en el cuerpo del mensaje en vez de adjuntarla.

Para activar el servicio meramente debemos completar el mail al que deseamos recibir las notificaciones, el asunto del mensaje de notificaciones, imagen de rastreo a utilizar, cantidad máxima de avisos a recibir y clickeamos en el botón con la leyenda “Click to activate my SpyPig“. Debajo aparecerá nuestra imagen con un conteo indicandonos el tiempo restante que tenemos para copiar y pegar ese código en nuestro mensaje.

En la sección de Requirements nos explican cómo utilizar el servicio en profundidad. Para el caso de los usuarios de Firefox deben utilizar la acción de drag and drop en vez de copy and paste para obtener el código, y los usuarios de Outlook deberán colocar el modo de editor de html para enviar sus imagenes de rastreo.

Si al copiar la imagen en tu mensaje ven la ruta de este modo:

<img src="cid:3D556AD3-4C9F-4F69-ABEB-FB7546D46B57@my.isp.com">

Significa que el rastreo fallará ya que fue convertido a una imagen adjunta y no hace ninguna llamada al servidor remoto. El código debería verse así:

<img src="http://www.spypig.com/04f6b62e-2ec1-102b-ac16-00188be/pig.gif">

Les recomendamos que hagan algunas pruebas enviandose correos con seguimiento a sus propias cuentas para poder configurar correctamente el cliente de correos y luego ya poder hacer uso del servicio con total confianza.

Articulos relacionados:

1. Convertir PDF a WORD (.doc) o a Excel y recibirlo por email
2. Colocar nuestro logo en el Escritorio de WordPress
3. Cómo trabar una relación laboral estable con tu creatividad

Cómo lo dice el título, estamos frente a un generador de CSS3, el cuál es muy intuitivo. Podemos navegar por distintas pestañas, las que corresponden a una característica especial de CSS3; de lo contrario, desde la pestaña “Home” podemos seleccionar alguna de las mismas.

La generación es muy simple, a medida que configuramos por medio de algunos controles hasta obtener lo que deseamos, podemos observar el resultado final en un ejemplo en el centro de la pantalla, mientras que a la izquierda podemos obtener el código propio para CSS3, y debajo del ejemplo, por medio de logotipos, observar qué navegadores son compatibles con dicho efecto.

Articulos relacionados:

1. Navegadores y CSS3
2. Generadores CSS3 y otras herramientas
3. Machetes CSS2.1 y CSS3