Reducir el tamaño de los PNG

Últimamente, y para imágenes muy vistas, como el logo de la página, suelo utilizar este método que descubrí en su día en las recomendaciones sobre imágenes de la Wikipedia. Necesitarás las herramientas PNGOUT, OptiPNG, DeflOpt y AdvDef:

optipng -o7 imagen.png
advdef -z4 imagen.png
pngout /ks imagen.png
deflopt imagen.png

Para imagenes que no van a verse tantas veces, me basta con el plugin Save for web para GIMP.

Reducir el tamaño de los JPEG

Para reducir el tamaño de las imágenes jpg podemos utilizar, por ejemplo, jpegtran (binarios para Windows):

jpegtran -optimize -outfile optimizada.jpg imagen.jpg

Este comando no provoca pérdidas respecto de la imagen original.

Reducir el tamaño de los CSS

El primer paso debería ser, evidentemente, eliminar las reglas obsoletas que ya no se utilizan, pero que se han mantenido en la hoja de estilo, bien por despiste o bien por dejadez. Para ello puede ser útil, por ejemplo, Dust-Me Selectors, una extensión para Firefox que nos informará de los selectores no utilizados en la página actual. También puede comprobar una serie de páginas listadas en un sitemap (aún no está actualizado para Firefox 3.6, así que si lo queréis usar en esta versión, podéis actualizarlo usando mi aplicación Update XPI, por ejemplo).

Una vez hemos eliminado las reglas obsoletas, podemos pasar a reducir la hoja de estilo, usando propiedades de atajo, como font:bold 12px verdana en lugar de font-weight:bold, font-size:12px y font-family:verdana; eliminando comentarios o eliminando espacios en blanco innecesarios. Podemos hacer esto utilizando, por ejemplo, CSSTidy:

csstidy.exe estilo.css ––template=highest ––remove_last_;=true estilo-comprimido.css

Para volver a tener un css legible, de forma que podamos hacer cambios fácilmente, podemos ejecutar csstidy con las opciones por defecto:

csstidy.exe estilo-comprimido.css estilo.css

Reducir el tamaño de los JS

YUI Compressor, de la librería de YUI de Yahoo!, es posiblemente la mejor opción, aunque es necesario tener instalado el JRE o el JDK de Java para poder utilizarlo:

java -jar yuicompressor-2.4.2.jar script.js -o optimizado.js

Comprimir en el servidor

Al comprimir el contenido al vuelo en el servidor podemos reducir aún más el tamaño de los archivos, pero, a cambio, consumiremos más CPU y memoria en cada petición, lo que puede provocar que el servidor se colapse, o que se tarde más en servir cada petición. Por lo tanto, en este caso, es necesario sopesar si va a merecer la pena.

Apache cuenta con un par de módulos para comprimir el contenido en el servidor: mod_gzip y mod_deflate. mod_deflate, por defecto, comprime menos que mod_gzip, aunque es más rápido que este. Puedes comprobar si alguno de ellos está activado en tu servidor creando un archivo PHP que llame a la función phpinfo:

<?php phpinfo(); ?>

Otra opción a tener en cuenta para comprimir el contenido en el servidor es utilizar minify, un script PHP que combina, comprime y cachea las hojas de estilo y los scripts.

Por último, para archivos estáticos, otra opción, sólo recomendada para gente con algún conocimiento básico sobre Apache, sería comprimir nosotros mismos los ficheros. Sólo tenemos que usar gzip para crear los archivos comprimidos

gzip -c estilo.css > estilo.css.gz

y editar el archivo .htaccess para que el servidor sirva las versiones comprimidas cuando el navegador del cliente mande la cabecera Accept-Encoding.

AddEncoding x-gzip .gz

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+)$ $1.gz [L]
</IfModule>

Podz de Tamba2 ha creado un pequeño tutorial sobre cómo ejecutar WordPress desde un dispositivo externo usb utilizando la aplicación Webserver On a Stick (WOS), pero nada nos impide correr cualquier otra aplicación web.

WOS está licenciado bajo la GPL, y consiste en un servidor Apache (2.2.0) con soporte PHP (4.4.2 / 5.1.2.2) y MySQL (5.0.18), que incluye la aplicación PhpMyAdmin (2.8.0-beta1) para acceder facilmente a las bases de datos.

Ahora sí, se confirma que Google va a comenzar a ofrecer este servicio, en principio como beta privada (Gmail for your domain).

Por ahora no hay mucho más en su web, a parte de un formulario a rellenar si queremos que nos tengan en cuenta como beta testers. A ver si hay suerte.

En esta ocasión vamos a ver cómo administrar las bases de datos MySQL de forma sencilla, sin tener que recurrir a comandos crípticos introducidos en la consola, sino a través de la potente interfaz web que nos ofrece la aplicación phpMyAdmin, escrita en PHP y código abierto.

Descarga el archivo zip de la última versión estable de phpMyAdmin desde su página web y descomprime el fichero en un directorio cualquiera, por ejemplo phpmyadmin, dentro del DocumentRoot de ApachePor defecto, C:\Archivos de programa\Apache Group\Apache2\htdocs. Lo cierto es que esto no es lo más seguro, pero si lo más sencillo, y no merece la pena complicarse.

Para configurar phpMyAdmin tendremos que editar un archivo de texto (a estas alturas ya estamos acostumbrados) llamado config.inc.php.

Sustituye $cfg['PmaAbsoluteUri'] = ”; por $cfg['PmaAbsoluteUri'] = ‘http://localhost/phpmyadmin’; para indicar a la aplicación la URL con la que se accederá a phpMyAdmin. Evidentemente, en el caso de que no hayamos colocado la aplicación en la base de DocumentRoot o hayamos utilizado un nombre distinto para el directorio de phpmyadmin, tendremos que modificar la URL de la forma correspondiente.

Si queremos ser capaces de acceder a MySQL a través de phpMyAdmin desde un PC remoto tendremos que introducir el nombre de dominio correspondiente (o la IP, si es estática) en lugar de localhost, además de haberlo activado en su momento en el wizard de configuración de MySQL, aunque es más inseguro.

Busca ahora la variable $cfg['Servers'][$i]['password'] e introduce la contraseña que utilizaste durante la configuración de MySQL. Evidentemente esto no es seguro si cualquiera tiene acceso físico a nuestro PC, en cuyo caso deberíamos utilizar autentificación http ($cfg['Servers'][$i]['auth_type'] = ‘http’;) o un .htaccess de forma que se nos pida el login cada vez que queramos acceder a la aplicación.

Una vez realizados estos sencillos pasos seremos capaces de iniciar la aplicación dirigiendo nuestro navegador a la URL correspondiente. En nuestro ejemplo, http://localhost/phpmyadmin/.

Si en entregas anteriores no nos quedaba más remedio que ensuciarnos las manos editando archivos de texto para configurar los programas, en este caso tendremos a nuestra disposición un instalador que debería dejarnos muy poco por hacer.

Antes de nada, como siempre, es necesario descargar el software correspondiente desde su página web. Para llevar a cabo la descarga de Zend Optimizer tendremos que registrarnos antes en la web de Zend Technologies.

Durante la instalación se nos preguntará por el servidor web utilizado (Apache 2.x), la localización del archivo de configuración de PHP, php.ini (c:\php en nuestro ejemplo), el directorio en el que está instalado Apache (por defecto C:\Archivos de programa\Apache Group\Apache2) y el directorio en el que se almacenan las webs que servirá Apache (DocumentRoot, cuyo valor es, si no lo hemos cambiado, C:\Archivos de programa\Apache Group\Apache2\htdocs).

Una vez terminado el proceso, si cargamos al archivo info.php que creamos para comprobar la instalación de PHP, debería aparecer algo así:

Apache, por sí solo, sólo permite mostrar al visitante webs estáticas, escritas en HTML Esto no es del todo cierto, ya que se pueden utilizar lenguajes que se interpreten del lado del cliente, como JavaScript., que no es más que un lenguaje de maquetado. Es decir, HTML no nos permite más que indicar el aspecto del texto. Basicamente lo más excitante que podemos hacer con HTML es mostrar imágenes y crear enlaces.

Si queremos crear una web dinámica, con la que el usuario pueda interaccionar realmente y que modifique su comportamiento según esta interacción, tendremos que utilizar un lenguaje de programación como PHP, Perl, JSP o ASP.

En este artículo veremos cómo instalar en nuestro servidor el intérprete de PHP y el gestor de bases de datos MySQL de forma que podamos usar en nuestro PC aplicaciones como WordPress, el sistema de publicación que utiliza esta web.

PHP es, como ya hemos mencionado, un lenguaje de programación. El código PHP se puede incluir en un documento HTML, lo que nos permite crear páginas web dinámicas. Estas líneas de código serán interpretadas en el servidor y el resultado mandado al cliente después. Esto es lo que se llama server-side o del lado del servidor, en comparación con client-side o del lado del cliente, modelo en el cual es el propio PC cliente el que tiene que interpretar el código. Un ejemplo de lenguaje de programación que ejecuta del lado del cliente es Javascript.

Lo primero que tenemos que hacer para instalar PHP es, evidentemente, descargar los binarios de PHP. Nos interesará obtener el archivo zip con los binarios de la última versión (buscad algo parecido a “PHP zip package” bajo el encabezamiento “Windows Binaries”). No utiliceis el instalador.

Una vez descargado, pasamos a descomprimirlo. A efectos prácticos el directorio donde lo instalemos no importa, pero a lo largo del tutorial utilizaré como ruta c:\php.

Antes de pasar a configurar PHP y el servidor Apache para que utilice el intérprete instalado, modificaremos la variable de entorno Path, que indica a Windows los directorios donde buscar archivos, por ejemplo, cuando se llama a un ejecutable. Hacemos click con el botón derecho sobre Mi PC y seleccionamos Propiedades para abrir el diálogo de Propiedades del sistema. Seleccionamos la pestaña Opciones avanzadas y una vez ahí, Variables de entorno. En el cuadro de variables de sistema haremos doble click sobre la variable Path para editarla, y añadiremos al final de la lista ;c:\php (cada entrada se separa con un punto y coma).

Las distintas opciones de PHP se configuran mediante un archivo llamado php.ini situado en c:\php. Por defecto este archivo no existe, sino que tendremos que crearlo renombrando el archivo php.ini-recommended. Pasemos a editar php.ini.

Busca el texto include_path = ".;c:\php\includes" y descoméntalo (borra el ; al inicio de la línea). Evidentemente, si no hemos instalado php en C:/php tendremos que modificar esta línea.

Modifica el valor de doc_root para que coincida con el directorio donde se guardan los archivos que mostrará Apache (por defecto, si no lo cambiamos en httpd.conf, este será C:\Archivos de programa\Apache Group\Apache2\htdocs).

Modificamos el valor de session.cookie_path:
session.cookie_path = \

Y por último, modificamos el valor de session.save_path para poder trabajar con sesiones (el directorio que pasemos como valor a esta variable debe existir, PHP no lo creará por nosotros):
session.save_path = "C:\php\sesiones"

Solo resta activar algunas extensiones útiles para que estas se carguen automaticamente. Tendremos que indicar a PHP dónde se guardan las extensiones, modificando extension_dir de forma que contenga la ruta al directorio ext dentro de la carpeta donde se instaló PHP (c:\php\ext si PHP se instaló en c:\php).

Una vez hecho esto buscamos la sección Windows Extensions que muestra una lista de distintas extensiones que podemos activar. Para cada extensión que queramos, no tenemos más que borrar el punto y coma al principio de la línea o bien añadir una nueva línea si no existe. En el Manual de PHP podemos ver para qué sirve cada una de ellas. Necesitaremos activar, al menos, php_mysql.dll para que PHP pueda guardar y obtener datos de una base de datos MySQL. También es muy recomendable php_mysqli.dll, que ofrece conexiones mejoradas (i de improved) y php_mbstring.dll, necesaria para utilizar codificaciones de caracteres en las que cada caracter ocupa más de un byte (por ejemplo UTF8, la codificación que se utiliza en esta web). Si no sabeis de que os hablo, mejor activad las tres

Es recomendable no activar una extensión si no conoces cual su función, entre otras cosas porque muchas de ellas necesitan otros archivos, y en el caso de que PHP no los encuentre se quejará.

Una vez configurado PHP es el momento de modificar la configuración de Apache para trabajar con este. Como recordareis del artículo anterior, el archivo de configuración de Apache es httpd.conf, situado por defecto en C:\Archivos de programa\Apache Group\Apache2\conf.

Busca el texto:
#
# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
# Example:
# LoadModule foo_module modules/mod_foo.so
#


Inmediatamente después encontrarás una lista de módulos que se cargarán con Apache. Añade al final de la lista LoadModule php5_module “c:/php/php5apache2.dll” para cargar el módulo de PHP 5.

Busca el texto:
# AddType allows you to add to or override the MIME configuration
# file mime.types for specific file types.
#
#AddType application/x-tar .tgz
#
# AddEncoding allows you to have certain browsers (Mosaic/X 2.1+) uncompress
# information on the fly. Note: Not all browsers support this.
# Despite the name similarity, the following Add* directives have nothing
# to do with the FancyIndexing customization directives above.
#
#AddEncoding x-compress .Z
#AddEncoding x-gzip .gz .tgz
#
# If the AddEncoding directives above are commented-out, then you
# probably should define those extensions to indicate media types:
#

Que precede a una lista de tipos MIME que el servidor es capaz de reconocer. Añade al final de la lista AddType application/x-httpd-php .php

Por último busca:
#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
# The index.html.var file (a type-map) is used to deliver content-
# negotiated documents. The MultiViews Option can be used for the
# same purpose, but it is much slower.
#
DirectoryIndex index.html index.html.var


y sustituye DirectoryIndex index.html index.html.var por DirectoryIndex index.php index.html index.html.var. Esto indicará a Apache que los archivos php también pueden utilizarse como archivos de índice de un directorio.

Añade al final del fichero la línea PHPIniDir “c:/php” para indicar al servidor web dónde encontrar el archivo php.ini y reinicia el PC.

Hora de probar que PHP se ha instalado correctamente. Esto se suele hacer creando un archivo php (crear un nuevo archivo con cualquier editor de textos, con nombre, por ejemplo info.php) cuyo contenido será < ?php phpinfo() ?>. Introduce en la barra de direcciones del navegador la url http://localhost/info.php para probarlo. El resultado debería ser parecido a este:

Solo resta proceder a la instalación de MySQL. MySQL es una sistema de gestion de bases de datos de código abierto. Una base de datos no es más que un conjunto de información relacionada con una cierta estructura. Todas las entradas y comentarios escritos en esta web, por ejemplo, se guardan en una base de datos mediante PHP y son mostrados cada vez que el usuario lo pide mediante PHP. Por eso es más que probable que si vas a utilizar PHP tengas que instalar también MySQL (u otro sistema de gestión de bases de datos como PostgreSQL).

Descarga la última versión del instalador para Windows de MySQL desde su página web. En el momento de escribir este artículo existe una versión 5.0 pero no se recomienda dado que aún es una beta. En este ejemplo utilizaremos la versión 4.1.14.

La instalación utilizando el archivo que hemos descargado es bastante sencilla. Simplemente pulsa sobre siguiente (next) hasta llegar a la sección de registro en MySQL.com. No es necesario que nos registremos en su página web, por lo que podemos seleccionar simplemente Skip Sign-Up (Saltar registro).

Al final de la instalación se muestra una casilla que nos da la opción de abrir un wizard que nos permitirá configurar MySQL de forma rápida y sencilla. Evidentetemente, debemos mantener la casilla marcada.

La primera opción que se nos presenta en este wizard es si queremos utilizar una configuración estándar o bien una configuración más detallada. Dado que no es el objetivo de este artículo profundizar en el uso y configuración de MySQL vamos a elegir la opción “Standard Configuration”.

Marcamos las casillas correspondientes para instalar MySQL como un servicio de Windows (Install As Windows Service) y que este se lance automaticamente (Launch the MySQL Server automatically). Marcamos también el que se añada el directorio que contiene los ejecutables de MySQL a la variable Path de Windows (Include Bin Directory in Windows PATH) para poder correr estos desde cualquier lugar.

A continuación se nos mostrará una pantalla desde la que podremos introducir una contraseña para el usuario root (el administrador de la base de datos, es decir, un usuario con máximos privilegios). Hazlo, y procura acordarte de ella También se nos da la opción de seleccionar si queremos que sea posible conectarse como root desde otro PC y si queremos crear una cuenta anónima. Estas dos últimas opciones son riesgos innecesarios, por lo que mantendremos los checkboxes desmarcados. Siguiente.

Una vez llegados a este punto basta con pulsar execute para cargar la configuración seleccionada e iniciar MySQL.

Un servidor web no es más que un programa que ejecuta de forma continua en un ordenador (también se utiliza el término para referirse al ordenador que lo ejecuta), manteniéndose a la espera de peticiones por parte de un cliente (un navegador de internet) y que contesta a estas peticiones de forma adecuada, sirviendo una página web que será mostrada en el navegador o mostrando el mensaje correspondiente si se detectó algún error.

Instalar un servidor web en nuestro PC nos permitirá, entre otras cosas, poder montar nuestra propia página web sin necesidad de contratar hosting, probar nuestros desarrollos en local, acceder a los ficheros de nuestro ordenador desde un PC remoto (aunque para esto existen otras alternativas, como utilizar un servidor FTP) o utilizar alguno de los programas basados en web tan interesantes que están viendo la luz ultimamente.

Uno de los servidores web más populares del mercado, y el más utilizado actualmente, es Apache, de código abierto y gratuito, disponible para Windows y GNU/Linux, entre otros. Su instalación es bastante sencilla, pero antes de empezar con ella te recomendaría leer, si no lo has hecho ya, el artículo sobre No-IP que comentaba para crear un subdominio que apunte a tu PC, y poder utilizar una URL del tipo Nombre.no-ip.org para acceder a éste en lugar de tener que recordar su dirección IP. Si tu IP es dinámica no te queda más remedio que leerlo y aplicarlo.

Y ahora, si estás listo para comenzar, podemos empezar descargando el servidor web Apache desde la página de la Fundación del mismo nombre, haciendo click sobre el enlace Win32 Binary bajo la sección “best available version” (mejor versión disponible), asumiendo que utilizas Windows.

Una vez descargado el programa de instalación, pasamos a instalar el servidor web ejecutando el archivo obtenido. Acepta la licencia y pulsa siguiente (Next) hasta que nos pregunte por el dominio, nombre de servidor y correo web del administrador del servidor. Para los dos primeros campos, introduciremos el subdominio que creamos para nuestro PC en No-IP. Rellena el campo de email del administrador con una dirección cualquiera mediante la que se puedan poner en contacto contigo.

Por último, se nos pide que seleccionemos también si queremos que el servidor responda en el puerto 80 para todos los usuarios, o bien que sólo se active de forma manual, para el usuario actual, y en el puerto 8080. Lo normal es seleccionar la primera opción.

Pulsa siguiente un par de veces para terminar la instalación. Una vez instalado, deberíamos ser capaces de acceder al servidor web mediante un navegador introduciendo el nombre de dominio de nuestro PC en la barra de direcciones. El navegador mostrará una página web confirmándonos que Apache se ha instalado correctamente, similar a la siguiente.

Basta con copiar los archivos que queramos en la carpeta htdocs dentro del directorio donde instalamos Apache para que estos estén disponibles en el servidor.

Una vez llegados a este punto sólo resta configurar el servidor para adaptarlo a nuestras necesidades. El proceso de configuración de Apache se lleva a cabo a través de una archivo de configuración en modo texto llamado httpd.conf que podemos encontrar en la carpeta conf, o bien a través del menú de inicio de Windows en Configure Apache Server -> Edit the Apache httpd.conf Configuration File.

Se han escrito libros enteros sobre la configuración y uso de Apache, por lo que esto queda lejos del propósito de este artículo. Si te interesa mancharte las manos y personalizar totalmente el servidor echa un vistazo a la documentación de Apache en la web de la Fundación.