• Ir a la 1ª Parte – Minimiza las Peticiones HTTP
• Ir a la 2ª Parte – Seleccionando el Formato de Imagen

¿Por qué optimizar las imágenes?

Como habíamos visto en el primer capítulo sobre minimizar las peticiones HTTP, estábamos intentando reducir el número de peticiones HTTP combinando todas nuestras imágenes en una única imagen. Reduciendo el número de imágenes estamos reduciendo también el número de peticiones HTTP.

Ahora que tenemos un menor número de imágenes a cargar, necesitamos reducir el tamaño de estos archivos en disco, reduciendo así el tiempo de carga de nuestra web.

En este artículo trataremos de conocer los métodos de reducción para los 3 formatos de imagen más comunes:

• GIF
• JPEG
• PNG

A continuación analizaremos estos 3 formatos por separado, tratando de aportar una descripción clara y casos de uso para cada tipo de imagen.

Imágenes GIF

GIF es un tipo de imagen formada por una paleta de 256 colores indexados. Para cada pixel de la imagen tenemos su correspondiente color indexado. GIF es un formato de imagen sin pérdida, es decir, la imagen original no pierde calidad en cada modificación o guardado.

GIF es el formato ideal para mostrar animaciones de carga y otros tipo de imágenes animadas.

Además soporta transparencia y animaciones. El tipo de transparencia es “booleano“, un pixel puede ser o completamente transparente o completamente opaco, sin términos medios. En la actualidad, mucha gente sigue utilizando los GIF como animación para reflejar la carga de contenido via AJAX.

Actualmente podemos utilizar el formato GIF sin riesgos, ya que ha sido liberado de los problemas con patentes que le acechaban en el pasado.

Imágenes JPEG

JPEG no tiene la limitación de sólo 256 colores, pero no soporta transparencias. Este tipo de imagen puede contener millones de colores manteniendo una gran compresión por lo que es especialmente interesante y recomendado para el muestreo de fotos e imágenes de grandes dimensiones.

JPEG es el formato ideal para la muestra de fotos e imágenes de grandes dimensiones manteniendo un tamaño aceptable.

A diferencia de los GIF, JPEG sí que es un formato con pérdida, por lo que en cada modificación y posterior guardado estamos perdiendo calidad respecto a la imagen original, por lo que es muy recomendable mantener la imagen original siempre que trabajemos con este formato.

Imágenes PNG: PNG8 y Truecolor PNG

PNG es un formato sin pérdida y podemos dividirlo en dos tipos de imagen:

• PNG8
• Truecolor PNG

PNG8

PNG8 es un formato de paleta de 256 colores, como lo eran las imágenes GIF… por tanto: ¿qué diferencia PNG8 de GIF?

• Pros: Normalmente tiene un tamaño menor en disco y además soporta transparencias de tipo variable.
• Contras: Este formato no soporta animaciones.

Truecolor PNG

Por otra parte, tenemos Truecolor PNG (PNG24 y PNG32), el cual soporta millones de colores como ocurre con los JPEG… ¿qué lo diferencia del JPEG?

• Pros: Es un formato sin pérdida y soporta transparencia variable.
• Contras: Tiene un tamaño en disco más grande en la mayoría de ocasiones.

Por tanto podríamos afirmar que el formato Truecolor PNG debería ser empleado en la mayoría de las ocasiones para material imprimible, manuales de ayuda… además de ser un excelente formato intermedio entre las numerosas ediciones de una imagen JPEG.

Conclusión final

Repasando lo aprendido en este segundo capítulo, podemos sacar en claro el siguiente uso para cada tipo de imagen:

• GIF es el formato ideal para animaciones.
• JPEG es el formato ideal para las fotos.
• PNG8 es el formato ideal para todo lo demás iconos, imágenes de fondo, etc.

¡Esto es todo para esta segunda entrega! En la siguiente entrega trataremos de analizar los distintos métodos de optimización de imágenes para saber cómo reducir el tamaño de las mismas una vez hemos seleccionado el formato apropiado.

¡Nos vemos en la próxima publicación!

En este noveno volumen de “Logos que Inspiran” continuamos recopilando logos con un buen acabado visual, algunos destacan por ser realmente ingeniosos por la forma en que han logrado recrear las formas, otros son más sencillos pero de una gran calidad… en definitiva, logos que realmente impresionan e inspiran y que tratarán de despertar tu imaginación.

Game Underground

FIVE

Noodle Bar

Pregg

Sex Lovers

Beast Media

Wild Sugar

Fotomimi

Dmitriev Sommlier

Café Expresso

Reflexión final

Espero que os sea de utilidad y realmente estas colecciones despierten vuestro ingenio… Recordad que aceptamos sugerencias de cualquier tipo y que podréis hacérnoslas llegar desde nuestro twitter, sección de contacto o página facebook.

¡Nos vemos en la próxima publicación!

• Ir a la 1ª Parte – Minimiza las Peticiones HTTP
• Ir a la 2ª Parte – Seleccionando el Formato de Imagen

¿Por qué deben importarnos las Peticiones HTTP?

Echando un vistazo a algunos artículos interesantes acerca de la optimización del Front-End, podemos conocer datos tan aplastantes como que el 80% del tiempo que tarda en cargar una página se debe al tiempo de descarga de componentes del Front-End.

Por otra parte, Tenni Theurer comenta en su blog que entre un 40% y un 60% de los visitantes de un sitio web tienen su cache vacía, por lo que cobra todavía mas relevancia el tiempo de respuesta en la parte del Front-End.

Cuando hablamos de Front-End nos estamos refiriendo a la parte de la web que interactúa con el usuario, principalmente: javascript, css, imágenes, flash… etc. Supone un 80% del tiempo de carga de una web.

Si el 80% del tiempo de carga de nuestro sitio web se debe principalmente a los siguientes componentes:

• Javascript
• CSS
• Imágenes
• Flash

Reducir en número todos estos componentes hará que el renderizado de nuestra página sea más ágil y que el número de peticiones HTTP disminuyan, por lo que nuestra web cargará mucho más rápido.

De buenas a primeras podemos pensar que simplificando nuestros diseños web podremos ahorrar en número de peticiones HTTP, pero en realidad necesitamos encontrar un equilibrio entre optimización y diseño.

¡Veamos algunas prácticas recomendadas para tratar de reducirlas!

Reduciendo las Peticiones HTTP

Partimos de la base de que no queremos sacrificar nuestro diseño original, sino que queremos encontrar el equilibrio entre el diseño y la velocidad de carga para ello es recomendable seguir los siguientes consejos que describimos a continuación.

Aplicando la técnica de CSS Sprites

El uso de CSS Sprites es la mejor forma de reducir el número de peticiones de imágenes. En la mayoría de nuestros diseños y maquetaciones empleamos a menudo la propiedad de CSS background-image.

Por ejemplo, si tenemos 5 divisiones en las que se le está aplicando 5 imágenes de fondo distintas mediante background-image, tenemos un total de 5 peticiones de imágenes. En muchos casos podemos simplificar esas 5 imágenes en una única imagen, por tanto reduciremos el número de peticiones de 5 a 1.

¿Cómo conseguirlo? Quizás os venga bien este tutorial sobre CSS Sprites que hemos publicado hace relativamente poco tiempo.

Combinando archivos CSS

Combinar archivos CSS es otra práctica recomendada. En algunos casos podemos tener más de un archivo CSS, encontrando la forma de juntar todo el código CSS en un único archivo hará que todo sea más rápido.

Si por ejemplo tenemos varios archivos CSS pequeños, será mucho más óptimo juntarlos todos en un único y más grande archivo CSS porque una vez cargue estará en cache para futuras visitas / sesiones, evitando cargar varios pequeños archivos de CSS según la sección en la que nos encontremos.

Combinando archivos de script

Combinar archivos de script es otra buena práctica que podemos aplicar. En algunos casos es más complicado implementar varios archivos de script en un único archivo, pero como hemos dicho es importante, el tiempo que nos ahorra puede ser considerable y es la mejor forma de optimizar tus páginas.

Recuerda que puedes / debes minimizar todos tus scripts para conseguir archivos de menos peso, en algunos casos estamos hablando de un 50% menos de espacio en disco, lo cual es muchísimo como para no tenerlo en cuenta.

Recomendación de última hora: YSlow

Para los más curiosos os aconsejo que instaléis en vuestro firefox la extensión para el plugin Firebug YSlow de Yahoo. Con YSlow podréis comprobar y comparar tiempos de carga de vuestra web, ver dónde está flojeando vuestra optimización, consejos para mejorarla… etc.

Gracias a Javier Santana por el chivatazo, yo la verdad es que la uso a menudo, pero se me había pasado por alto y lo veo altamente recomendable. Seguramente trataremos esta y otras herramientas en alguno de los próximos capítulos, pero es algo por lo que empezar.

Conclusión final

¡Esto es todo para esta primera entrega! Recordad que reducir el número de peticiones HTTP es el primer paso en el proceso de optimización, especialmente para nuevos visitantes que tienen que cargar en cache todo el Front-End de nuestra página web.

En la siguiente entrega trataremos de analizar los distintos tipos de imágenes para saber qué utilizar en cada caso para posteriormente recomendar distintas técnicas para la reducción de las mismas.

¡Nos vemos en la próxima publicación!

Las tarjetas de visita han sido el objeto de la creatividad de muchos diseñadores y son ahora más que una manera de dar sus datos de contacto a un futuro colaborador. Se trata de expresar la identidad, la personalidad y la eficacia de la empresa en un trocito de papel que solía ser blanco, rectangular y que se podía perder facilmente.

Ahora la forma y la tipografía se han convertido en detalles indispensables para distinguirse de otras empresas y dan un toque muy personalizado para que la tarjeta de visita permita recordar y vizualizar inmediatamente de qué se trata la empresa y también el contacto que tuvo lugar entre los dos colaboradores.

Al contrario que en tiempos pasados, las tarjetas de visita son ahora una nueva vía de diferenciación entre la competencia, jugando con las formas, materiales, colores, tipografía… podemos llegar a calar en la memoria visual de nuestros colaboradores o posibles clientes.

Los materiales también son muy importantes y nos damos cuenta de que la variedad de materiales utilizados en la concepción de tarjetas de visita de “nueva generación” es muy amplia desde papel hasta plástico pasando por metal, lana…

Actualmente existe una plena libertad en cuanto al formato y a los colores de la tarjeta. La multitud de nuevas posibilidades multiplica las maneras con las que cada empresario puede quedarse en la memoria de su contacto.

Ideas, imágenes y conceptos

Como todo buen artículo de inspiración, lo importante terminan siendo los ejemplos… veamos algunos recopilados en la web.

Ogilvy

La iniciativa de Ogilvy, la agencia internacional de publicidad, marketing y RRPP consiste en adaptarse a la situación de crisis actual reduciendo el tamaño de las tarjetas tras la baja generalizada de los presupuestos. Sin embargo, con el diseño llamativo se desprende la idea de un condensado de eficacia y que a pesar de la crisis consiguen alcanzar sus retos sin perder tiempo ni dinero.

Asimismo vemos que el mensaje de las tarjetas se enfoca ahora mucho más en la imagen que al contacto propio. Como algunas marcas famosas que ya no necesitan indicar su nombre y cuyo logo ya es suficiente para reconocerlas, el objetivo es aquí enfocar sobre la imagen gráfica y crear un vínculo automático entre ella y la actividad de la marca. La creación de un juego interactivo también aporta un valor añadido a la iniciativa.

Master of Disguise

La inserción del juego en algo en principio serio y neutro como las tarjetas de visita es una muy buena manera para crear una memoria positiva.

Pablo Afieri

De esta manera las tarjetas de visita se pueden convertir en anécdotas.

Bracket

Jugando con la forma de ver las tarjetas…

Orient Express Noodle bar

Los negocios más tradicionales como puede ser un bar no se quedan atrás…

Tarjetas originales del diseñador elBarbon!

Groundwave design

Groundwave apuesta por diseños vectoriales elegantes y sencillos además de la tipografía.

Couldbe studios

Albert Polyakov

Este diseñador nos muestra una forma más agresiva de lo habitual… no dejará a nadie indiferente.

Danny Ngan

Felix Von de Weppen

Diseños sencillos… pero cargados de ingenio.

Valentina Alvarado por Pepe

Ya no hay límites

Ya no hay límites, el diseño y los colores no son suficientes y las formas cobran especial interés en algunos de los diseñadores más atrevidos.

Michael Fryer

Sid Skulluxus

Kevin Mitnick

Geeyen

Emerson Taymor

Petit Coeur por Marye-Linn

openthewindow.net por Martin Ringlein

Nos gusta

Nos gusta la plena libertad que han tomado los diseñadores y que les ha permitido crear trabajos de calidad. El verdadero objetivo de las tarjetas de visita puede ahora cumplirse y la multitud de diseños creativos y geniales permite la plena competencia a la que se dedican las empresas.

En este octavo volumen de “Logos que Inspiran” continuamos recopilando logos con un buen acabado visual, algunos destacan por ser realmente ingeniosos por la forma en que han logrado recrear las formas, otros son más sencillos pero de una gran calidad… en definitiva, logos que realmente impresionan e inspiran y que tratarán de despertar tu imaginación.

Valenwine

Quantum

Colourfruit

Aqua

Egg

Fuel

Soda

Golf Lessons Online

CO2

Tres Peces

Reflexión final

Espero que os sea de utilidad y realmente estas colecciones despierten vuestro ingenio… Recordad que aceptamos sugerencias de cualquier tipo y que podréis hacérnoslas llegar desde nuestro twitter, sección de contacto o página facebook.

¡Nos vemos en la próxima publicación!

Como comentábamos en la entradilla, en este capitulo nos enfocaremos sobre los diseños que nacen de catástrofes humanitarias y cómo tanto el diseño, la tipografía, el arte o incluso la moda se ponen al servicio de causas y apoyan la difusión y concienciación mediáticas. Veremos unos ejemplos de trabajos creativos desarrollados especificamente para ayudar Haiti.

Las emergencias humanitarias generan olas de solidaridad como lo hemos visto con el tsunami en 2004 y vemos que incluso los diseñadores ponen su arte al servicio de los países en crisis.

En situaciones de urgencia emergen trabajos de creatividad para llamar la atención de los ciudadanos y aunque se puede discutir las formas de intervención, mucha inspiración se destaca de los dramas y de los grandes cambios de la sociedad que sean tanto naturales como políticos como lo hemos visto con la campaña de apoyo a Obama el año pasado.

Ahora nos enfocaremos en unos diseños creados específicamente para concienciar a la población sobre el terremoto que ocurrió en Haiti en Enero de este año.

Todos hemos visto carteles de ayuda para Haiti en casi todos los sitios, paradas de autobus, revistas, periódicos… Cabe saber que tanto las organizaciones humanitarias como individuos han trabajado para crear diseños que captan la atención e incentivan el apoyo.

Design for Haití de Aaron Perry-Zucker

En Design for Haiti podréis encontrar ejemplos de diseños de la web creada por Aaron Perry-Zucker, diseñador, co-creador de Big New Ideas y fundador de Design for Obama.

Con esta web el autor invita a todos los diseñadores, artistas, programadores… a subir su diseño para crear una galería de ayuda a la causa. La iniciativa da consejos e información a los lectores y explica las técnicas que se suele utilizar en el contexto solidario como por ejemplo la “promoción” cuyos visuales tienen por objetivo entrenar una acción o el diseño infográfico que tiende a explicar una situación.

Aperryz

ChrisM70

pedrow

Otras iniciativas

Más allá de Design for Haití tenemos a diseñadores independientes que han producido varias técnicas e ideas diferentes para enfocar e informar la gravedad y urgencia de la situación.

Christopher Griego

Neos Brand

James Zwadlo de Zola Media

Chip Allison de Upstairs Basement

Nicholas Cornwall

Kode Logic y Pete Harrison

Miron Kiriliv

Thodoris Manolopoulos de Bluetit Design Studio

Ariel Salcé de Salcé Designs

Kyle Ellis Photography

Xnexno

La Tipografía

La tipografía también tiene un papel notable en este movimiento e incluso se organizan subastas de trabajos de diseñadores para recaudar fondos.

Josep Patau, famoso tipográfico catalán

Ibán Ramón, diseñador valenciano

La Moda

Finalmente, la moda participa en acciones de apoyo con la creación de camisetas y otros artículos de prenda. En los Estados Unidos, el CFDA (Council of Fashion Designers of America) se ha unido para lanzar “Fashion for Haiti” y recaudar fondos para la asociación Benefit Clinton Bush Haiti Fund con la creación de camisetas exclusivas. Peter Arnell, especialista en branding, diseñó el logo.

Creaciones en flickr

Como no iba a ser menos, en flickr existen multitud de creaciones relacionadas con la catástrofe de Haití.

Mike Fretto

James Martin y Jayne the Pain

Got Phi

Concursos

También se organizan varios concursos y charlas de diseñadores para pensar y apoyar la reconstrucción del país como Uniting Designers in Disaster, un foro abierto a diseñadores de todas las disciplinas para unirse y desarrollar ideas e iniciativas. El objetivo principal es “pensar para actuar” para fomentar acciones concretas de reconstrucción.

También se promueven otras operaciones como Opération Core77: Design an Emergency Shelter iniciada por el webzine epónimo y Spontaneous Arquitecture cuya meta es diseñar estructuras y ayudar a los supervivientes. El concurso está abierto hasta el 28 de febrero.

Nos gusta

Nos gusta el poder que consigue la imagen en movimientos de amplitud tan grande. La multitud de trabajos que se desarrollan en todos los sitios del mundo demuestra que el sector del diseño no es nada superficial y que tiene un verdadero impacto sobre la gente.

Aunque se trate seguramente mucho de marketing, tales iniciativas permiten conectar con el instinto solidario de cada persona y sacarnos incluso un minuto de nuestra comodidad gracias a unas técnicas más sutiles que las imagenes televisivas y a veces, más impactantes.

• Ir a la 1ª Parte – Mini Aplicaciones Web con Python y Juno
• Ir a la 2ª Parte – Mini Aplicaciones Web con Python y Juno

Descripción de la aplicación

Te preguntarás, ¿qué diablos es eso de un servidor de integración continua? Tiene un nombre espectacular, pero no es más que un servicio web que ejecuta un comando y almacena si la ejecución de ese comando fue bien o mal. Lo normal es que ese comando se encargue de compilar, pasar los test y otras tareas de una aplicación cada vez que hacemos un commit. Puedes leer un poco más sobre integración continua en la wikipedia.

En este tutorial vamos a usar bastantes cosas, por una parte vamos a dar un interfaz web donde se puedan ver si la aplicación ha pasado los test en cada commit, además llamaremos a procesos externos, lanzaremos threads y todo en poco más de 100 líneas de código.

El modo de funcionamiento de la aplicación es simple. Cuando se le indique a través del intefaz web, se va a bajar el último código disponible del repositorio que le indiquemos al arrancar y va a lanzar el proceso de compilación o test y mostrará los resultados en la web.

Base de datos

Primero es configurar juno y la base de datos. En este caso usamos sqlite (una base de datos embebida) y el fichero de base de datos es cipy.db. No habría problema es especificar mysql u otra.
El puerto lo cambiamos a 8000 para evitar que se pegue con un servidor web que podamos tener en el 80.

Un build no es más que una serie pasos que se ejecutan para obtener el producto final. Suele estar asociado a un binario final. Dentro de esos pasos normalmente está la compilación, ejecución de test, creación de paquetes instalables, etc, etc. En web lo habitual es hablar de deploy.

Además preparamos la tabla de builds, es decir, la tabla donde quedan registrados todos los builds de la aplicación. Los campos son:

• date: fecha cuando se lanzó el build
• result: resultado. 0 si falla 1 si todo fue bien
• output: en el proceso de compilación/test puede que se genere un log por la salida standard, quedará registrado en esta variable
• finished: indica si el proceso ha terminado
• rev: revisión que a la que corresponde ese build (sha1 si es git, un número natural si es subversion)

init({'db_location': 'cipy.db', 'dev_port':8000})
Build = model('Build', date='str', result='int', output='str', finished='boolean', rev='str');

Vayamos a por la interfaz web.

Interfaz web

El interfaz web tiene dos partes, la primera que es donde se muestra al usuario los builds y los resultados de cada uno y luego tenemos dos servicios que sirven para lanzar los builds e indicar el resultado final de un build.

interfaz de usuario

Vamos a mostrar los últimos 10 builds, por tanto, usando el API de base de datos se recogen los 10 últimos ordenados en orden descendente y se meten en una lista. Es fácil ver la equivalencia a una consulta SQL. Esos datos se le pasan al template html para que los represente. Además le pasamos el path donde está el repositorio alojado en la máquina.

@route('/')
def index(web):
  builds = find(Build).order_by(Build.id.desc()).limit(10).all();
  template("index.html", { 'builds': builds, 'project_path': repo_path })

En la parte HTML tenemos dos partes interesantes. Por una parte como renderizar los datos que nos pasa el controlador (index), usando un bucle en el cual, en función de si el build ha finalizado o no o si el build fue bien o no muestra los datos. El sistema de templates es ni más ni menos que python, así que si sabes python no tendrás problema en usarlo.

{% for b in builds%}
<li><span class="date">{{b.date}}</span>
          {% if b.finished %}
             rev: {{ b.rev }}
             {% if b.result == 0 %}
                <span class="ok">PASS</span>
             {% else %}
              <span class="fail">FAIL</span>
             {% endif %}
             <a id="{{b.id}}" class="show_output" href="#"> show output </a></li>
             <div class="output">
                {{b.output}}</div>
          {% else %}
            <span class="building">building...</span>
          {% endif %}
   {% endfor %}

En la parte javascript, se usa jquery para el manejo del DOM y hacer peticiones AJAX.

La primera parte se encarga de ocultar o mostrar lo que mostró por pantalla el comando que ejecutó el servidor de CI.

$(document).ready(function() {
          $(".output").hide();
          $(".show_output").click(function() {
            out = $(this).attr('id');
            $("#"+out+"_output").toggle();
          });

La segunda parte lanza una petición al servicio web de la aplicación (más adelante se explica en detalle) cuando se pincha en el enlace de build.

$("#build").click(function(){
            $("#build_msg").html("starting...");
            $.post("/build",callback=function(data) {
                $("#build_msg").html(data);
                location.reload();
            });
          });

Por último si hay algún build activo se recarga la página cada 30 segundos para mostrar el resultado en caso de que haya acabado.

if($('.building').length != 0)
{
  setInterval(function(){
    location.reload();
  },30*1000);
}

servicios

El servicio de lanzamiento del build es muy simple, lanza el un comando . Cuando se le llama recoge la versión actual del repositorio, crea un objeto Build (añade un registro en la base de datos) indicando que hay un trabajo lanzado y por último lanza un hilo donde se baja actualiza la copia local del repositorio y ejecuta el proceso de compilación. Cuando el proceso termine llamará al servicio explicado más abajo para indicar que ha terminado.

@route('/build')
def build(web):
  #coge la última revisión
  data, ret = cmd(scm_cmds[repo_type]['rev'], repo_path);

  # crea el objeto build que indica que el proceso ha sido creado
  b = Build(date=datetime.datetime.now().strftime("%b%d %H:%M"), finished=False, rev=data[:6])
  b.save(); # lo almacena en la BBDD

  # lanza el thread para ejecutar el build
  # la función que ejecutará el thread es build_work y se le pasan los argumentos en la variable args
  threading.Thread(target=build_work, args=(b.id,)).start();
  return "scheduled!"

Y como sabe este servidor qué comando debe lanzar cuando le ordenamos que haga un build. Algunos servidores de IC se configuran en el interfaz web el comando a lanzar, nosotros vamos a usar otro sistema, ejecutaremos un fichero predefinido. El fichero REPO/.ci/build será el que lance la aplicación cada vez que se lance un proceso de build y en función del valor de retorno la aplicación dará por válidos los test o no.

Por último tenemos el servicio que indica a la aplicación web que se ha terminado de ejecutar el comando REPO/.ci/build, para que almacene el resultado y se pueda ver en el interfaz web. Lo interesante de este servicio es que muestra como recoge los datos pasados como parámetros de una petición POST, usando el diccionario web.input(). Sólamente se limita a recoger los datos y actualizar la base de datos.

@route('/finish')
def build_finished(web):
    b = find(Build).filter(Build.id == web.input()['id']).one()
    b.finished = True;
    b.output = web.input()['output'];
    b.result = web.input()['ret'];
    b.save();
    return "ok";

lógica

Por último la aplicación usa el API de python para ejecutar los comandos de sistema, recoger los resultados, lanzar hilos y hacer peticiones http. Si tienes curiosidad puedes ver las funciones cmd, exec_ci_cmd y build_work. La más interesante es esta última, en la cual después de lanzar el comando, llama al servicio “finished” que hemos visto antes para indicar el estado del proceso una vez terminado.

def build_work(build_id):
    cmd(scm_cmds[repo_type]['reset'], repo_path);
    data, ret = exec_ci_cmd("build");
    if ret != None:
      data = data.replace("\n", "
");
    else:
      data = "%s file not found, i don't know how to build" % join(CIPY_FOLDER, "build");

    # llamar al servicio web (POST)
    params = urllib.urlencode({'id': build_id,  'output': data, 'ret': ret})
    urllib.urlopen("http://127.0.0.1:8000/finish", params).read();

    # hooks, comandos que se lanzan después de ejecutar el comando
    if ret == 0:
      exec_ci_cmd("build_pass");
    else:
      exec_ci_cmd("build_failed");

Conclusión

Con este tuto terminamos la serie sobre juno. En resumen podemos decir que no es un framework válido para grandes aplicaciones web, sin embargo sí es útil para pequeños servicios como este.

Como curiosidad decir que esta pequeña aplicación web la uso en mi trabajo en un linux sobre un embebido y se dedica a compilar una aplicación con cada commit. Para enlazar son los commits de subversion símplemente tenemos que usar wget en el post-commit-hook:

#!/bin/sh
wget http://ciserver/build -O/dev/null

¡Nos vemos en próximas publicaciones!

El pack de iconos está diseñado a mano mediante la técnica pixelart para proyectos de caracter comercial o personal. Contiene un total de 81 iconos de un gran acabado visual.

El set de iconos de Pixel Art es especialmente útil para proyectos que necesiten iconos para social media. Son un total de 81 iconos disponibles en formato .PNG para utilizar de forma libre en tus proyectos personales y comerciales.

Los iconos están disponibles en tres sets, uno de dimensiones 32×32 pixels, otro a 16×16 pixels y finalmente una versión larga en formato botón. Como siempre os dejamos con una imagen previa para que le echéis un vistazo antes de descargarlos.

Imagen Previa del Pack de Iconos

Son realmente bonitos:

El pack es ofrecido por el artista Benjamin Reid, que no duda en colaborar con toda la comunidad y poner a nuestra disposición estos iconos de social media que a buen seguro nos ahorrarán mucho tiempo de búsqueda y/o creación en nuestros proyectos y diseños.

¡Espero os sirvan para vuestros proyectos!

¡Hola a todos! despues de un mes de bastante trabajo y poco tiempo libre para escribir, vuelvo a la carga con un nuevo tutorial en PHP.

Quien no conozca la librería cURL, igual se ha preguntado muchas veces cómo hacen los sitios web para mostrar contenido de otras páginas en la suya. Por ejemplo, se preguntará cómo funciona la famosa aplicación que revisa los links escritos en el texto de una web y muestra una previsualización en miniatura.

O sin ir más lejos, puede que alguna de estas preguntas pasen por su cabeza alguna vez: ¿cómo imprimes en una web el contenido RSS de un dominio ajeno?, ¿cómo descargas una imagen de un servidor ajeno para no hacer abuso de recursos?, ¿cómo es posible iniciar sesión en hotmail para extraer los contactos?. La respuesta es común para todas esas preguntas: usando cURL.

cURL te permite crear conexiones con distintos protocolos bajo distintos SO para poder conectar tus aplicaciones con otros entornos, como el web, Active Directory, etc

cURL es una herramienta que permite abrir conexiones en una amplia variedad de protocolos y que está disponible tanto como herramienta de consola (para ejecutar directamente con comandos) como en librería (para usar en vuestro código) y que permite hacer prácticamente todo: manejo de cookies, descarga de ficheros binarios, envíos de parámetros GET y POST, etc.

Es tan potente y fácil de usar, que podemos crear sin muchos problemas un crawler que recorra páginas web para analizar información, al estilo de por ejemplo el Google Bot.

cURL en PHP

Antes de nada, os recuerdo que podéis ver la documentacion de cURL para PHP desde la página oficial. Todas las funciones y constantes predefinidas tienen el prefijo ‘curl_’ y ‘CURL’ respectivamente, por lo que no hay problema en identificarlas en el código y recordarlas se hace un poco más fácil.

Toda conexión con cURL comienza con curl_init, que nos devolverá un manejador (handler) en caso de éxito o FALSE en caso de fallo. Este manejador será necesario para usar las demás funciones y estará disponible hasta que se llame a la funcion curl_close(). Vamos a ver un ejemplo sencillo:

$handler = curl_init("http://www.google.es");
$response = curl_exec ($handler);
curl_close($handler);
echo $response;

Al ejecutar este pequeño trozo de código, lo que estáis haciendo es abrir una conexión con la página de Google, descargar el contenido como si de un navegador se tratase, e imprimirlo como si fuese contenido propio.

Como véis es muy fácil, pero normalmente suele complicarse un poco más la cosa, porque por ejemplo, hay webs que devuelven una respuesta u otra según el navegador en el que te encuentras, o en un idioma u otro dependiendo del valor de las cabeceras HTTP. Para definir las cabeceras todas correctamente, se usa la función curl_setopt().

Con la funcion curl_setopt() podemos establecer las cabeceras HTTP para recibir el contenido adecuado.

Para indicarle al servidor remoto que tu idioma preferido es el castellano y que tu navegador es Firefox:

curl_setopt($handler, CURLOPT_USERAGENT,"Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1");
curl_setopt($handler, CURLOPT_HTTPHEADER, array("Accept-Language: es-es,en"));

Puedes ver la gran lista de opciones que puedes configurar aquí. Normalmente cuando tienes algún problema con alguna conexión, sueles encontrar la solución jugando con estas opciones.

Envío de formularios POST

Muchas veces la información que necesitamos está sometida a enviar parámetros con el método POST. No pasa nada, cURL como ya hemos dicho, nos permite hacer esto sin mucho esfuerzo. Imagina que queremos iniciar sesión en una web para acceder a nuestro contenido via cURL.

Lo primero que tenemos que hacer es iniciar sesión desde un navegador e identificar que parámetros POST se envían para que el login tenga éxito, esto se puede ver de forma muy fácil con la herramienta Firebug para Mozilla Firefox.

Imaginemos que estos son los parámetros que se envían:

• user: ontuts
• password: test
• url: http://www.example.com/login

Bien ya sabemos todo lo que necesitamos, ahora toca crear el código:

$url = "http://www.example.com/login";
$postData = array("user" => ontuts, "password" => "test");
/*Convierte el array en el formato adecuado para cURL*/
$elements = array();
foreach ($postData as $name=>$value) {
   $elements[] = "{$name}=".urlencode($value);
}
$handler = curl_init();
curl_setopt($handler, CURLOPT_URL, $url);
curl_setopt($handler, CURLOPT_POST,true);
curl_setopt($handler, CURLOPT_POSTFIELDS, $elements);
$response = curl_exec ($handler);
curl_close($handler);

Con este código lo que hacemos es acceder a la url pero enviando datos adjuntos que el server interpretará y nos devolverá la repuesta adecuada.

Manejando Cookies

En el ejemplo anterior vemos un ejemplo de cómo iniciar sesión en una web, pero si lo probáis comprobaréis que una vez iniciada la sesión, en la próxima petición ya no tendréis acceso.

Eso es debido a que por lo general, cuando inicias sesión, el servidor te genera una cookie que tienes que guardar y que identifica tu sesión para corroborar que eres tu y no otra persona malintencionada (como si fuese una tarjeta de identificación) la que está accediendo.

Por defecto cURL no guarda las cookies pero es fácil obligarle a que lo haga:

//Código de inicio de cURL
//........
//
$cookie_file = "/tmp/".time();
curl_setopt($handler, CURLOPT_COOKIEFILE, $cookie_file);
curl_setopt($handler, CURLOPT_COOKIEJAR, $cookie_file);
$response = curl_exec ($handler);
curl_close($handler);

Es importante advertir que para que las cookies se guarden correctamente, el usuario de apache (normalmente www-data) tiene que tener acceso de lectura y escritura en el directorio que especifiques.

Si juntamos esto con el ejemplo anterior, podríamos crear un script que se conecte por ejemplo a Facebook y escriba algo en tu muro automáticamente, o que recupere una lista de tus amigos, etc…

Una clase para facilitar las cosas

Por último os dejo una clase que he creado hace un par de meses para un proyecto. No se puede decir que sea una clase general ni mucho menos, pero funciona perfectamente para lo que la he usado: inicios de sesión y extracción de datos. Podéis modificarla a vuestro antojo para adaptarla a vuestras necesidades:

/**
 * Clase para gestionar las conexesiones y peticiones a servidores remotos
 */
class HttpConnection {
    private $curl;
    private $cookie;
    private $cookie_path="/cookies";
    private $id;

    public function __construct() {
        $this->id = time();
    }
    /**
     * Inicializa el objeto curl con las opciones por defecto.
     * Si es null se crea
     * @param string $cookie a usar para la conexion
     */
    public function init($cookie=null) {
        if($cookie)
            $this->cookie = $cookie;
        else
            $this->cookie = $this->cookie_path . $this->id;

        $this->curl=curl_init();
        curl_setopt($this->curl, CURLOPT_USERAGENT,"Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1");
        curl_setopt($this->curl, CURLOPT_HEADER, false);
        curl_setopt($this->curl, CURLOPT_COOKIEFILE,$this->cookie);
        curl_setopt($this->curl, CURLOPT_HTTPHEADER, array("Accept-Language: es-es,en"));
        curl_setopt($this->curl, CURLOPT_COOKIEJAR, $this->cookie);
        curl_setopt($this->curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($this->curl, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($this->curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0);
        curl_setopt($this->curl, CURLOPT_RETURNTRANSFER,true);
        curl_setopt($this->curl, CURLOPT_CONNECTTIMEOUT, 5);
        curl_setopt($this->curl, CURLOPT_TIMEOUT, 60);
        curl_setopt($this->curl, CURLOPT_AUTOREFERER, TRUE);
}
    /**
     * Establece en que ruta se guardan las cookies.
     * Importante: El usuario de apache debe tener acceso de lectura y escritura
     * @param string $path
     */
    public function setCookiePath($path){
        $this->cookie_path = $path;
    }
    /**
     * Envía una peticion GET a la URL especificada
     * @param string $url
     * @param bool $follow
     * @return string Respuesta generada por el servidor
     */
    public function get($url,$follow=false) {
        $this->init();
        curl_setopt($this->curl, CURLOPT_URL, $url);
        curl_setopt($this->curl, CURLOPT_POST,false);
        curl_setopt($this->curl, CURLOPT_HEADER, $follow);
        curl_setopt($this->curl, CURLOPT_REFERER, '');
        curl_setopt($this->curl, CURLOPT_FOLLOWLOCATION, $follow);
        $result=curl_exec ($this->curl);
        if($result === false){
            echo curl_error($this->curl);
        }
        $this->_close();
        return $result;
    }
    /**
     * Envía una petición POST a la URL especificada
     * @param string $url
     * @param array $post_elements
     * @param bool $follow
     * @param bool $header
     * @return string Respuesta generada por el servidor
     */
    public function post($url,$post_elements,$follow=false,$header=false) {
        $this->init();
        $elements=array();
        foreach ($post_elements as $name=>$value) {
            $elements[] = "{$name}=".urlencode($value);
        }
        $elements = join("&",$elements);
        curl_setopt($this->curl, CURLOPT_URL, $url);
        curl_setopt($this->curl, CURLOPT_POST,true);
        curl_setopt($this->curl, CURLOPT_REFERER, '');
        curl_setopt($this->curl, CURLOPT_HEADER, $header OR $follow);
        curl_setopt($this->curl, CURLOPT_POSTFIELDS, $elements);
        curl_setopt($this->curl, CURLOPT_FOLLOWLOCATION, $follow);
        $result=curl_exec ($this->curl);
        $this->_close();
        return $result;
    }
    /**
     * Descarga un fichero binario en el buffer
     * @param string $url
     * @return string
     */
    public function getBinary($url){
        $this->init();
        curl_setopt($this->curl, CURLOPT_URL, $url);
        curl_setopt($this->curl, CURLOPT_BINARYTRANSFER,1);
        $result = curl_exec ($this->curl);
        $this->_close();
        return $result;
    }
    /**
     * Cierra la conexión
     */
    private function _close() {
        curl_close($this->curl);
    }
    public function close(){
        if(file_exists($this->cookie))
            unlink($this->cookie);
    }
}

Modo de uso

$http = new HttpConnection();
$http->setCookiePath("/my_cookie_path/");
$http->init();
echo $http->get("http://www.google.es");
$http->close();

Como conclusión…

La librería cURL puede llegar a ser extramadamente útil en muchas ocasiones: podemos crear scripts automáticos que entren en determinadas páginas web e interaccionen por nosotros, recoger datos de forma automática y guardarlos en una base de datos, indexar contenido de otras páginas a modo de buscador, recoger todas las imágenes de una misma página como hace facebook al compartir sus enlaces…

Si bien puede que muchos de vosotros no la conocieseis, seguro que para próximos proyectos se os viene a la cabeza esta librería y terminaréis haciendo un buen uso intensivo de cURL .

¡Nos vemos en el próximo tutorial!

En este séptimo volumen de “Logos que Inspiran” continuamos recopilando logos con un buen acabado visual, algunos destacan por ser realmente ingeniosos por la forma en que han logrado recrear las formas (como es el caso del logo “Ass”), otros son más sencillos pero de una gran calidad… en definitiva, logos que realmente impresionan e inspiran y que tratarán de despertar tu imaginación.

Click

Ice

San Francisco Acupuncture

Vine Creatives

Ass

Lookout

New Leaf

Candela

Fast Food

Le Ballet Théatral de Montréal

Reflexión final

Llevábamos un par de semanas sin publicar nada de esta serie de inspiración… ya eran horas, ¿no?. Trataremos de seguir actualizando esta serie al menos una vez por semana como de costumbre.

Espero que os sea de utilidad y realmente estas colecciones despierten vuestro ingenio… Recordad que aceptamos sugerencias de cualquier tipo y que podréis hacérnoslas llegar desde nuestro twitter, sección de contacto o página facebook.

¡Nos vemos en la próxima publicación!