Mejorar el rendimiento de una pagina: Optimizando imágenes.

Cuando estamos en el proceso de diseño de una pagina web, por lo general uno esta pendiente es del rendimiento en el código o de terminar el trabajo rápido para el día que te comprometiste a entregarlo que si no lo haces te botan, y por supuesto son muchas las cosas que se le escapan a uno entre esas cosas que se le escapan a uno es que como se esta trabajando en local pues no nos damos cuenta de que tan pesada esta nuestra pagina y cuanto se va a tardar un usuario en descargarla.

Pero que seria una pagina web sin imágenes, sino un sitio lugubre y oscuro que nadie quería ver ni visitar, por ello hay varios factores para poder optimizar las imágenes los cuales voy a tratar de explicar para que pueden mejorar sus programas.

Factores para tomar en cuenta a la hora de optimizar imágenes:

Peso de la imagen.

Una de las principales razones por la cual una pagina se vuelve muy pesada es porque tenemos una gran cantidad de imágenes, a veces hasta sobre cargamos la pagina, y ninguna de ellas a sido optimizada, un ejemplo de esto es una pagina web que estaba optimizando en estos días en la cual se redujo unos 300 kb solo optimizando las imágenes, es decir como un 30% del peso de la pagina, sin quitarle nada a la pagina, ni reducir la calidad de la misma.

Ustedes de preguntara como puede ser esto?, pues simple las imágenes cuando son generadas ya bien sea por una cámara, teléfono, scaner o algunos programas, traen dentro de si información relevante sobre la imagen, además de que están en un formato "x" en el que lo guardo el programa, cuando optimizamos una imagen no es que le quitamos calidad, sino que reducimos su peso eliminando información que no sea necesaria y además guardándola en un formato que ocupa menos espacio, también se puede reducir la calidad de la imagen y con eso reducir el peso de la imagen pero a veces no es necesario.

Aquí les dejo dos herramientas:

optipng
jpegotim

Tipo de Imagen:

A la hora de crear imágenes en nuestra pagina web, pues muchas veces no se siguen unas lineas claras y pues se crean imágenes tiff, bmp, jpeg, png, etc. y cuando vamos y vemos estamos usando imágenes que están destinadas para otro tipo de aplicaciones en nuestra pagina web, por lo general imágenes para la web son imágenes pequeñas con poca información y que muchas veces el usuario ni les presta atención, en una pagina web debemos tener por lo general imágenes de tipo jpg y png, son las más recomendadas para la web, gif solo se debe usar en caso de querer poner una animación. 

Ahora bien porque y cuando usar cada uno de los formatos para web.

Png o gif, por lo general la gente usa cualquiera de estos dos formatos para imágenes con transparencia, ya que los dos soportan transparencias, pero ya en este tiempo actual todos los navegadores nuevos soportan el formato PNG a la perfección y por ende para imágenes con transparencia o que se requiera cierta calidad se debe usar es PNG, no gif.  principalmente porque el formato png ademas de soportar transparencias también produce imágenes mas livianas ya que fue echo pensando en la web.

JPG, es un formato muy útil que se destaca del resto de los formatos porque a diferencia de otros formatos las imágenes grabadas en jpeg ocupan mucho menos espacio, en la web se debe usar para cualquier imagen que no requiera transparencias, por lo mencionado anteriormente.

Ofrece Imágenes a escala:

Cuando usamos imágenes en nuestras paginas web, a veces se dan casos donde la imagen es más grande que el are donde se va a mostrar, por múltiples razones puede suceder esto, pero se debe estar pendiente ya que al ofrecer una imagen del mismo tamaño como se va a mostrar en la pagina es lo mejor que se puede hacer ya que el navegador no va a descargar recursos demás que después no va a necesitar, y esto puede llegar a reducir inclusive a la mitad el tamaño de la imagen. Esto se hace con photoshop, gimp o cualquier programa de edición de imagenes.

JPEGOPTIM Optimizador de imagenes jpeg

Esta es otra grandiosa herramienta para optimizar imágenes, esta optimiza imágenes Jpeg es super fácil de usar, aunque viene solo para linux, pero es muy muy útil, ya que puede reducir hasta un 40 % el peso de una imagen sin reducir su calidad.

WEB: http://freshmeat.net/projects/jpegoptim/

Para optimizar imágenes con JPEGOPTIM es por linea de comandos, solo con poner jpegoptim y el nombre la imagen ya empieza nuestro programa a optimizar las imágenes, pero aquí les dejo los comandos para optimizar aun mas las imágenes:

-n simula la compresión pero no hace nada.

--strip-all elimina todo tipo de comentarios y marcas.

--strip-com elimina los comentarios de la imagen

--strip-exif elimina todas las marcas tipo exif de la imagen

--strip.itpc elimina las marcas tipo itpc

--strip-icc elimina las marcas tipo icc

-m[0-100] especifica la calidad máxima de la imagen de salida, con este atributo si se reduce la calidad de nuestra imagen, pero con unas pocas pruebas se darán cuenta que no es mucho lo que se reduce.

Ejemplo de la optimizacion de imágenes, hay tres una sin optimizar, otra donde se eliminaron todos los comentarios y marcas y la ultima sin comentarios ni marcas y con una calidad de 50. Para que se tomen una idea:

http://www.box.net/shared/f5v0adq0kk6j7rpfnjjl

OPTIPNG una herramienta para optimizar png

Ahora bien en esta ocasión les voy a presentar una herramienta para optimizar imagenes OptiPNG es muy sencillo de usar y bastante ligero.

WEB: http://optipng.sourceforge.net/

OptiPNG dispone una versión linux y otra windows, para optimizar una imagen con este solo debemos escribir optipng <nombre del archivo> por supuesto optipng tiene varias opciones, aqui les voy a hacer una lista:

-h: Muestra la ayuda
-o: Selecciona el nivel de compresión del 1 al 7
-out: Genera un archivo externo optimizado
-simulate: corre la optimizacion pero no la hace, solo es para ver que tanto podría hacer.
-keep: Mantiene un respaldo de la imagen a optimizar.

Crear urls de primer nivel perzonalizadas con Codeigniter

Ah la hora de programar con codeigniter, muchas veces hemos tenido la necesidad de que urls al estilo  de midominio.com/articulo/quienesomos  se cambien por midominio.com/quienesomos, para esto hay varias maneras de trabajarlo, una de las mas maneras mas facil es tener un proyecto con hmvc, y en la funcion remap del controlador por defecto, cargar el controlador que necesitemos.

Debemos estar seguros que en application/config/routes.php este configurado un controlador por defecto y que ese sea en el que vamos a trabajar.

Aqui les dejo un ejemplo de como seria el codigo de la funcion remap en el controlador por defecto:

    function _remap($method)
    {
        switch ($method)
        {
            case 'index':
            $this->index();
            break;
            default:
            $this->load->module('articulo');
            $this->articulo->index($method);
        }
    }

Con esta simple manera podemos tener urls de primer nivel perzonalidas en pocos pasos, es un poco paresido a los subdominios perzonalizados.

Si estamos usando hmvc hay que agregar las siguientes lineas en aplication/core/MY_router.php

class MY_Router extends MX_Router {

    function MY_Router()
    {
        parent::__construct();
    }

    function _validate_request($segments)
    {
//echo count($segments)."i";
        // Comprueba que el controlador no existe
     if(count($segments)==1)
     {
     if (!file_exists(APPPATH.'controllers/'.$segments[0].EXT) && !file_exists(APPPATH.'controllers/'.$segments[0]) && !file_exists(APPPATH."modules/$segments[0]/controllers/"))
     {
     $segments = array("inicio", $segments[0]);
     }
     }
        return parent::_validate_request($segments);
    }
}
?>

Tutorial: ReCAPTCHA y Codeigniter, sacando a los bots de tus aplicaciones.

En este articulo voy a explicar cómo usar ReCAPTCHA en codeigniter, ReCAPTCHA es un sistema anti-bot ampliamente usado en múltiples páginas web, este sistema también se puede implementar con codeigniter y en este tutorial tratare de explicar cómo se debe usar.

Primero es descargarnos el archivo con la libreria http://www.box.net/shared/hid2ch2i70my9z0vlz5u abajo hay un link donde esta el archivo original, este link tiene el archivo original más la traduccion de la libreria al español.

Les recomiendo que para probar lo agreguen en un proyecto nuevo y despues pues si lo agreguen al que ya tengan echo. 

Después tenemos que entrar en http://www.google.com/recaptcha/whyrecaptcha y solicitar una Api key, te darán dos una privada y una publica, las dos deberemos entrar en application/config/recaptcha.php y hay colocar respectivamente la public y la private key. 

Ya con esto tendremos todo listo para probar nuestro captcha, solo demos entrar en /recaptchademo, y ya veremos como sale nuestra imagen recaptcha y si lo probamos debe funcionar a la perfección.

Si deseamos ponerlo en español y hemos descargado el que esta en box.net solo debemos ir a application/config/config.php y cambiarlo el lenguaje por espanol, español con N, lo hice con n porque la ñ en algunos servidores da problemas. Y también deben buscar la función $this->recaptcha->get_html() y pasar el parametro 'es' ya que con esto tendremos el recaptcha en español.

El recaptcha tiene la posibilidad de configurar el tema posee 4 temas ya configurados (red, white, blackglass y clean) o también podemos crear nuestro propio reCaptcha. aquí están las opciones que podemos cambiar: http://code.google.com/intl/es-ES/apis/recaptcha/docs/customization.html.

Aquí les dejo unos links que pueden resultar importantes.

• Wiki de codeigniter:  Wiki ReCAPTCHA.
• Link de Descarga(básico): http://www.box.net/shared/hid2ch2i70my9z0vlz5u
• Link de Descarga(básico): http://codeigniter.com/wiki/9e7fe13ff10d125d41f40490f61d36e6/
• Api reCATPCHA: http://code.google.com/intl/es-ES/apis/recaptcha/intro.html
• Link de Descarga(Completo): http://www.box.net/shared/hll4cqyz4e5290y8atay

Emulador Javascript de Linux

Hola a todos, publico esta entrada porque hoy vi algo que me parecio muy interesante y de verdad es digno de publicarlo, no se el nombre del creador, pero creo una libreria en javascript que emula un computador con linux en nuestro navegador, con compilador c incluico, de verdad se ve muy bueno, y para quien quiera aprender un poco de linux y no quiera instalarlo esta muy buena la idea. Aca les dejo el link y espero que disfruten tanto como yo viendolo.

http://bellard.org/jslinux/

Primero entramos como root, somos los unicos usuarios del sistema, si hacemos estamos en /root, si hacemos un ls veremos un hello.c, y si queremos compilarlo haremos un tcc -o hello hello.c compilaremos el script y despues lo podremos correr tranquilamente. De verdad es super util, para probar se los recomiendo.

Subdominios dinamicos con php y codeigniter

Una pregunta muy recurrente en internet y los foros es: ¿Se puede hacer subdominios dinamicos con php?¿Como se hacen estos subdominios dinamicos con php?, en muchas partes la gente pregunta pero pocas veces hay una respuesta clara y contundente, en este tutorial tratare de explicar como se hace, y veran que no es tan complicado como parece.

Lo primero que necesitamos es tener algunos conocimeintos basicos de:

¿Que es un Subdominio?
http://es.wikipedia.org/wiki/Subdominio
¿Que es un Servidor Dns.?
http://es.wikipedia.org/wiki/Domain_Name_System

Sistema de nombres de dominio o DNS: es un sistema que se creo con la finalidad de hacer mas claro el internet para todos, antes para accesar a una pagina web habia que poner la direccion ip del servidor al que nos queriamos conectar, por supuesto esto hacia muy dificil recordar de que era esa pagina e inclusive cual era su ip, para evitar esos problemas se crearon los DNS que son nombres de dominios que estan asociados a una direccio ip y de esta manera se facilita la compresion y uso de las paginas web.

Todos sabesmos que las url de una pagina siempre tienen una estructura parecida a esta:
www.google.com

• www: subdominio
• google: nombre de dominio
• com: dominio de nivel superior

 Ahora bien, si nosotros deseamos crear un subdominio en nuestro servidor apache, debemos modificar el httpd.conf y agregar las siguientes lineas:

<VirtualHost *>
        ServerAdmin webmaster@ejemplo.com
        ServerAlias subdominio.ejemplo.com
        DocumentRoot /var/www/subdominio.ejemplo.com
        <Directory />
                Options FollowSymLinks
                AllowOverride None
        </Directory>
        <Directory /var/www/subdominio.ejemplo.com>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
                # Uncomment this directive is you want to see apache2's
                # default start page (in /apache2-default) when you go to /
                #RedirectMatch ^/$ /apache2-default/
        </Directory>

        ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
        <Directory "/usr/lib/cgi-bin">
                AllowOverride None
                Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
                Order allow,deny
                Allow from all
        </Directory>

        ErrorLog /var/log/apache2/subdominio.ejemplo.com.log

        # Possible values include: debug, info, notice, warn, error, crit,
        # alert, emerg.
        LogLevel warn

        CustomLog /var/log/apache2/subdominio.ejemplo.com.log combined
        ServerSignature On

</VirtualHost>

Donde dos cosas importantes para destacar son el ServerAlias y DocumentRoot, con el ServerAlias especificamos el nombre del subdominio y con el DocumentRoot espcificamos la ruta que debe accesar para buscar el subdominio,


Aparte de la configuracion en el apache debemos agregar en nuestro servidor DNS una entrada "A" con la ruta completa del subdominio y la direccion ip de nuestro mismo servidor, con estas dos cosas ya tenemos un subdominio creado en nuestro servidor. Ya si entramos en el subdominio deberia salirnos lo que tenemos en la ruta especificada.

Ahora bien si queremos hacer multiples subdominios con php, debemos seguir los paso anterirores pero con algunas diferencias, la primera es que al agregar el host al pache hay que poner en el Server alias en ves del subdominio poner *, queda asi: ServerAlias *.ejemplo.com

Y en la entrada "A" Del servidor dns en ves de poner  subdominio.ejemplo.com, colocar *.subdominio.ejemplo.com, con esto ya tenemos todos los subdominios de nuestro servidor apuntando a DocumentRoot, ahora bien para manejarlos ya esto queda de parte de php, Podemos crear un nuevo proyecto con codeginiter o dejarlo en con el que ya hemos estado trabajando, lo que hay que hacer es que en el controlador por defecto agregar las siguientes lineas:

    function _remap($method)
    {
        if($_SERVER['SERVER_NAME']!= 'localhost' && $_SERVER['SERVER_NAME'] != '127.0.0.1')
        {
            $array = explode('.',$_SERVER['SERVER_NAME']);
            if($array[0]!='www')
            {
                $method=$array[0];
            }
            elseif($array[0]=='www')
            {
                $method=$array[1];
            }
        }
            switch ($method)
            {
                case 'index':
                $this->index();
                break;
                default:
               $ths->lo que queramos.
            }
        
    }

Lo que hacemso es si es el servidor local carga el metodo tal cual como esta escrito si no es el servidor local pues estrae el subdominio y lo pasa como metodo, ya despues nosotros dentro del swicth podemos crear diferentes metodos a nuestor antojo y de esa maneja generar los subdominios dinamicos como queramos.

Si trabajamos con hmvc pues se nos hace la vida un poco mas facil ya que no tenemos que crear el metodo dnetro de el archivo del controlador sinoq ue lo hacemos aparte con lo cual nuestro codigo es mas facil de entender y todo se encuentra mejor organizado, solo deberiamso agregar:

$this->load->module('empresa');
 $this->empresa->index($method);