Opsou » Labs

Top 10 de las entradas más leídas en 2011

Sergio Carracedo — Fri, 30 Dec 2011 08:02:46 +0000

2011 se termina y es momento de hacer repaso del trabajo de todo el año. En lo que respecta a este blog estos son los post más leidos por vosotros durante 2011

10. Interactuando: Tipos de códigos QR

9. Last night a dj saved my life

8. Servidor de máquinas virtuales remotas con Virtualbox

7. Cartografía básica para creativos

6. Chat en tu navegador con node.js y Faye

5. Mejorando la seguridad en faye: Wildcards

4. Tutorial: Retrato con tipografías

3. Cinco módulos interesantes de Drupal 7

2. Diez buenas frases sobre creatividad

1. Música Invisible

Gracias a todos por leernos y por compartir con nosotros buenos momentos en 2011. Os deseamos que 2012 sea al menos tan bueno como 2011

OpForm: Creación y gestión de formularios potente y sencilla en PHP 5

Sergio Carracedo — Thu, 15 Dec 2011 14:53:13 +0000

Queremos compartir un proyecto GPLv3 que iniciamos. Se trata de una Liberia, o mejor dicho un conjunto de clases, que gestiona la creación, visualización y validación de formularios web.

Una de las labores criticas a las que se enfrenta todo programador web es la petición de datos a los usuarios en el lado cliente y como segunda fase de este proceso la validación y securización de estos datos.

En 2001 nació neoforms una clase monolítica escrita para php 4 que permitía crear y validar formularios de forma sencilla. Como primera aproximación resultó ser muy flexible en algunos aspectos y útil, pero era complicada de mantener y su crecimiento fue desordenado.

En base a la experiencia de uso acumulada con neoforms hemos creado forms, un conjunto de clases que resuelven el mismo problema (la gestión y validación de formularios) pero con un enfoque más modular y estructurado. Usando la posibilidades los objetos de PHP5 (herencia, abstracción, etc).

Creemos que esta librería puede llegar a ser muy potente y extensible por ello cobra sentido que todos seamos participes por ello hemos creado un repositorio en gitHub (https://github.com/sergiocarracedo/OpForms) en el que podréis descargar el código y aportar vuestras mejoras, sugerencias, y realizar el reporte de bugs.

Hoja de ruta

Actualmente (15/12/2011) en el repositorio esta el primer envio, que posee un funcionamiento correcto, y en el cual la arquitectura de clases esta correctamente definida, pero no nos queremos quedar aquí y estas son las funcionalidades que pretendemos implementar:

Creación de más tipos de campo:

Hora
Geolocalización (con mapa)
Campos relacionados (que muestre datos de un campo en función del valor seleccionado en otro)
Ordenación de valores
Subida de ficheros
Subida de fotos

Creación de más validadores

Tarjeta de crédito
CCC
NIF /CIF
Completar los validadores de comparación

Gestión de validación de lado cliente (Ajax)
Agrupación de elementos
Creación de más validadores

Esperamos vuestro feedback y se acepta cualquier sugerencia

En breve publicaremos con más detalle el funcionamiento de la clase y como crear nuevos tipos de campos, mientras podéis probar su funcionamiento descargando el repositorio

Nueva rama de desarrollo en Node.js y nueva imagen de marca

Sergio Carracedo — Mon, 08 Aug 2011 11:04:44 +0000

Node.js el servidor javascript del que ya hemos hablado en post anteriores (Node.js, Javascript power!!, Mejorando node.js: Faye y Chat en tu navegador con node.js y Faye) acaba de publicar una nueva rama (branch) de desarrollo, la 0.5.x, sobre la que seguir creciendo. Hay numerosos cambios y bugfixes que podeis conocer aqui. La rama estable continua siendo la 0.4.x,

Este es un momento importante para el proyecto que continua su desarrollo. Muestra de esto es al apoyo de Microsoft para crear un port sobre la plataforma Windows

También ha aprovechado para evolucionar la marca y crear una nueva imagen corporativa más consistente e identificable.

Chat en tu navegador con node.js y Faye

Sergio Carracedo — Tue, 12 Jul 2011 08:18:50 +0000

Siguiendo con los posts sobre faye, vamos a realizar un ejemplo práctico y muy vistoso, vamos a realizar un sencillo pero funcional chat web en este post.

Lo primero es crear el servidor node:

Solo tenemos que incluir la extensión de faye para node

var Faye = require(‘./faye/faye-node.js’); var fayeServer = new Faye.NodeAdapter({  mount:    ‘/’});
fayeServer.listen(8888);

A este fichero lo llamaremos node.js, ahora desde bash lanzamos el servidor que acabamos de crear:

$ node node.js

Y ya tenemos nuestro “servidor de chat” corriendo, preparado para funcionar

En el lado cliente creamos un sencillo html y un script para gestionar el chat:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="faye/faye-browser-min.js"></script>
 
<script type="text/javascript">// [CDATA[
                        $(function() {
                                var client = new Faye.Client(‘http://localhost:8888/’);
                                var nick = "";
 
                                client.subscribe(‘/chat’, function(message) {
                                        $("#chat").append("
"+message.nick+"</strong>: "+message.text+"</div>

 
")
 
                                });
 
                                $(".nick form").submit(function() {
                                        nick=$(".nick input[name=nick]").val();
                                        $(".nick").hide();      
                                        $(".chatMessage").show();
 
                                        return false;
                                })
 
                                $(".chatMessage form").submit(function() {
                                        text=$(".chatMessage input[name=message]").val();
                                        client.publish(‘/chat’, {
                                                nick : nick,
                                                text: text
                                        });
                                        return false;
                                })
                        });
 
// ]]></script>
 
 
 
 
<div class="nick"><form action="#" method="POST" enctype="multipart/form-data"><label>Tu nick:</label>  <input type="text" name="nick" /> <input type="submit" value="Entrar al chat!!" /></form></div>
<div class="chatMessage" style="display: none;"><form action="#" method="POST" enctype="multipart/form-data"><label>Tu mensaje:</label>  <input type="text" name="message" /> <input type="submit" value="Enviar" /></form></div>
 
<hr />
 
 

Dejo una demostración funcional del tutorial para ver realmente la rapidez de node y faye lo recomendable seria iniciar la demo en dos o tres navegadores distintos.

Descargar código

ACTUALIZACIÓN: Debido a un cambio de proveedor en nuestro servidor node ha dejado de funcionar y el ejemplo del tutorial no funcionará

Mejorando node.js: Faye

Sergio Carracedo — Mon, 11 Jul 2011 08:02:41 +0000

Como ya comentamos en una entrada anterior node.js es una herramienta muy potente, que nos permite crear servidores empleando javascript como lenguaje de programación en el servidor, pero puede ser costoso crear ciertas herramientas y protocolos desde 0.

Faye es una capa (extensión) sobre node.js, lógicamente escrita en javascript, que crea un sistema de publicación y suscripción a canales de mensajes basados en el protocolo Bayeux.

En otras palabras, faye se encarga de gestionar los canales, los envios de mensajes y la recepción por parte de los subscriptores a esos canales.

Faye consta de dos partes, una en el lado servidor y otra en el lado cliente (también escrita en javascript)

Para explicar el funcionamiento de faye más fácilmente pongamos un ejemplo:

Imaginemos que estamos creando una aplicación que necesita enviar notificaciones en tiempo real a todos los usuarios conectados a una página.

En nuestro script para node.js instroducimos lo siguiente:

var Faye = require(‘faye’),

server = new Faye.NodeAdapter({mount: ‘/’});

server.listen(8000);

y lanzamos node.js

$ node faye.js

Ahora en el cliente, cargamos un fichero javascript con este contenido:

var client = new Faye.Client(‘http://localhost:8000/’);

client.subscribe(‘/messages’, function(message) {

alert(‘Got a message: ‘ + message.text);

});

Con estas dos sencillas operaciones, todos los usuarios que estén conectados a nuestra web estarán subscritos al canal messages y estarán en disposición de recibir información.

Para enviar un mensaje, desde uno de los clientes, que puede ser nuestro panel de control de la web ejecutamos el siguiente javascript:

client.publish(‘/messages’,{

text: ‘Hello world’

});

Y inmediatamente en todos los navegadores de los visitantes de la web aparecerá un alert con el mensaje “Hello world”

Este es un ejemplo extraído de la web de faye, pero quería explicarlo con un ejemplo práctico. Como veis la potencialidad y simpleza de este sistema es grande, ya que podemos enviar más variables que message si lo necesitasemos (por ejemplo, número de mensajes sin leer, fecha, etc), tambien podemos tener varios canales distintos a por los que enviar distintos tipos de información o solo subscribir a algunos usuarios a esos canales.

En un próximo post explicaré como manipular los mensajes en el lado servidor, para por ejemplo, almacenarlos en una base de datos, enviar mensajes desde el propio servidor, etc.

3D sin plugins en tu navegador con javascript: three.js

Sergio Carracedo — Mon, 27 Jun 2011 07:44:26 +0000

Hasta hace muy poco necesitábamos plugins, para realizar tareas que ahora nos parecen triviales, reproducir sonido, ver videos, hasta la más simple de las animación de un botón. Pero esto esta cambiando, la evolución de los navegadores es frenética y la próxima liberación de la especificación final de HTML5 y CSS3 y otros estandares (actualmente son borradores), nos hace pensar que podremos tener pronto una nueva revolución en la web. Permitiendo a los creativos dar rienda suelta a sui imaginación sin chocar con la usabilidad, la accesibilidad y el posicionamiento como sucede hasta la fecha.

En una nueva demostración de las posibilidades de los estándares mrdoob, pone a nuestra disposición un framework escrito completamente en javascript para manipulación de objetos 3D. Con lo que nos libera de la carga de realizar muchos de los cálculos necesarios para algo tan simple generar la perspectiva segun el posicionamiento de la cámara.

Simplemente nos tendremos que preocupar de colocar los objetos y la cámara en nuestro lienzo para empezar a jugar con el 3d en nuestro navegador.

three.js es capaz de trabajar sobre canvas (modo soportado por IE9, safari 4, FF4, Chrome) y empleando webGL, una especificación que permite al navegador usar la tarjeta gráfica (GPU) para hacer el render de la escena, con la consiguiente mejora de velocidad y de calidad de los gráficos (soportado por Chrome y FF4)

Es casi obvio decir que modo canvas tiene limitaciones en cuanto al uso de texturas, luces y sistemas de partículas. Pero es perfectamente funcional para muchas aplicaciones.

No podíamos dejar de probarlo así que hemos jugado un poco con esta magnifica herramienta creando nuestro propio universo Opsou en nuestra web. No dejéis de probarlo.

Recopilación de plugins Jquery para la selección de color (colorPicker)

Sergio Carracedo — Mon, 25 Apr 2011 08:38:51 +0000

En un proyecto reciente nos encontramos con la necesidad de facilitar al usuario la selección de colores, lo habitual seria emplear simplemente un campo input en el que el usuario introduce el color en formato hexadecimal (Ej #04afea). Para una usuario acostumbrado a trabajar con colores en la web esto no representa mayor problema, pero para un usuario convencional el escoger un color de esta manera puede ser todo un suplicio.

La mayoría de los usuarios de windows reconocen y están habituados el selector de color del sistema, ¿por que no tener algo similar a esto en nuestra web?

Aquí es donde entra en juego la magia de jQuery, os dejamos un listado de plugins que os permitirá mejorar la usabilidad de vuestras aplicaciones

Farbtastic

http://acko.net/dev/farbtastic

ColorPicker

http://www.eyecon.ro/colorpicker/

JPicker

http://www.digitalmagicpro.com/jPicker/

mColorPicker

http://blog.meta100.com/post/600571131/mcolorpicker

Small color picker

http://electrobeat.org/files/picker/example.html

Como usar Twidge desde dos servidores

Sergio Carracedo — Mon, 28 Mar 2011 12:56:46 +0000

Recientemente os hablamos de Twidge una herramientas para tweetear desde bash, pero si os pasa como a nosotros que necesitamos actualizar una misma cuenta de twitter, desde dos equipos distintos, os habreis dado cuenta que al configurar la cuenta en el segundo, en el primer equipo deja de funcionar.

Esto se debe a que twitter autoriza un solo token para cada aplicacion y al configurar la cuenta en twidge en el segundo equipo, impicitamente estamos revocando los permisos del token generado en el primer equipo.

La forma más sencilla de resolver este “problema” es copiar el archivo de configuración (.twidgerc) en tu directorio home de twidge del segundo equipo al primero.

Twidge: Actualiza tu twitter desde bash

Sergio Carracedo — Fri, 25 Mar 2011 09:42:22 +0000

En muchas ocasiones necesitamos estar informados de la actividad de nuestro servidor o equipo local, confirmar la realizaciónj de backups, emitir alertas, etc.

Lo tradiccional es que el servidor nos envie un correo electronico mediante el comando

mailx

Aqui os proponemos una alternativa más 2.0, el uso del comando twidge.

Twidge es un cliente twitter (que tambien opera con identi.ca) para uso en linea de comandos. Sus caracteristicas más importantes son:

Es muy sencillo de utilizar

Es compatible con la API actual de twitter, usando OAuth (Olvidate de curl)

Puede acortar URL usando tinyurl

Esta muy pensado para su uso en script de shell

Su isntalación es muy sencilla, esta disponible en los repositorios de Debian (y en Ubuntu, como explicaré ahora), aunque tambíen puedes compilarlo tu mismo)

Si usas Ubuntu, necesitas añadir una nueva fuente al repositorio, para ello editamos el sources.list

sudo nano /etc/apt/sources.list

Y añadimos en la última linea deb http://ftp.de.debian.org/debian squeeze main
Actualizamos el repositiorio:

sudo apt-get update

Lo instalamos

sudo apt-get install twidge

Una vez instalado hay que configurarlo para su uso

twidge setup

Nos facilitara una URL que hay que visitar para obtener un token que nos devuelve twitter que ingresaremos en twidge.
Y listo!! Ahora ya podemos usar nuestra cuenta Twitter desde nuestra shell favorita

twidge lsrecent

Nos devolverá las 20 últimas actualizaciones

twidge update "Mi primer tweet desde shell"

Actualiza nuestro estado

twidge follow opsou

Siguenos

twidge unfollow microsoft

Lo contario

twidge lsfollowers

Lista los usuarios que te siguen

Ahora puedes modificar tus scripts para que te envien las actualizaciones del servidor. Nuestro consejo es que crees una cuenta twitter para tu servidor , que sigas esa cuenta con tu usuario y que protejas los tweets de miradas indiscretas.

Detección del foco de la ventana con javascript

Sergio Carracedo — Fri, 05 Nov 2010 18:50:38 +0000

En algún caso necesitamos controlar cuando el usuario tiene atención sobre nuestra página, o lo que es lo mismo cuando “window has focus”. Por ejemplo en el chat que hemos desarrollado para ChaXpert necesitabamos que cuando llegara un nuevo mensaje el navegador emitiera un sonido, pero no queriamos que ese sonido se reproduciese en todo momento, solo cuando el usuario estaba fuera de la aplicación web (en otra pestaña, en una aplicacion de escritorio), para ello necesitamos recurrir a los eventos de window, pero como en casi todo Internet Explorer va por su cuenta.

Para Firefox, Safari, Chrome/Chromium los eventos a emplear son: onfocus y onblur, que se activan cuando la ventana(pestaña) adquiere el foco y lo pierde respectivamente.

En el caso de Internet Explorer estos eventos se llaman onfocusin y onfocusout, realizando la misma función que los citados anteriormente pero con otro nombre (cosas de Microsoft) y teniendo en cuenta que son eventos de document.

Para poder asignar las funciones a los eventos correspondientes a cada navegador en este caso se emplea la compilación condicional de explorer como elemento diferenciador del navegador, pero si ya tenemos cargada alguna libreria de detección o queremos usar otro método solo tenemos que modificar el if.

Vamos al código!!

var windowFocus=true;

function onBlur() {

windowFocus=false;

};

function onFocus(){

windowFocus=true;

};

if (/*@cc_on!@*/false) { // check for Internet Explorer

document.onfocusin = onFocus;

document.onfocusout = onBlur;

} else {

window.onfocus = onFocus;

window.onblur = onBlur;

}

Lo que hacemos, simplemente, es asignar una funcion a cada evento (previa selección del nombre de evento según el navegador) y segun la ventana/pestaña pierda o gane el foco cambiamos el valor de una variable global, a partir de lo cual podremos ejecutar las acciones que necesitemos en función de ese valor.

El código base lo hemos encontrado en http://odondo.wordpress.com/2007/08/28/javascript-and-cross-browser-window-focus/ donde tambien podreis ver una demo de funcionamiento

Node.js: Javascript power!!

Sergio Carracedo — Mon, 25 Oct 2010 17:07:50 +0000

Node.js es un entorno de programación de entrada/salida orientada a eventos, sobre el motor de Javascript V8 (el mismo que usa Google Chrome)

Pero ¿Que quiere decir todo esto? ¿Y para que me puede servir?

Lo más básico que podemos realizar con node.js es un servidor web (HTTP).

var http = require(‘http’);

http.createServer(function (req, res) {

res.writeHead(200, {‘Content-Type’: ‘text/plain’});

res.end(‘Hello World\n‘);

}).listen(8124, "127.0.0.1");

Con estas pocas lineas tenemos un servidor web escuchando el puerto 8124 funcionando en nuestro equipo y respondiendonos siempre “Hello World”

Podemos crear tambien servidores TCP.

Para programar un servidor node.js empleamos javascript como lenguaje, con los que nos evitamos muchas de las complicaciones de otros lenguajes de programación como C, C++, python, etc.

Como comentaba, esta completamente orientado a eventos por lo que no tendremos que preocuparnos de muchas tareas que el servidor realiza por nosotros, por ejemplo. Si queremos responder a una petición, programamos la respuesta al evento “on data”.

Es muy ligero y rápido, y su API es simplemente fantastica, tenemos acceso de recursos del equipo (ficheros) y muchas utilidades que nos facilitarán el trabajo de programación.

Muchos os preguntareis: ¿Para que necesito programar un servidor HTTP si hay opciones muy potentes disponibles (apache, ngix, etc)?

La respuesta es bien sencilla, no son tan ligeros y especificos como node.js, con el podremos hacer uso de la tecnología push que nos permitira hacer virguerias como estas:

Chat en el navegador: http://chat.nodejs.org/

Podemos mostrar el cursor de los otros visitantes de la web: http://jeffkreeftmeijer.com/2010/experimenting-with-node-js/

Servidor de archivos estáticos http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/

En proximos post seguiremos adentrandonos en este maravilloso proyecto

Sigue a chaXpert a través de su nuevo blog

Pedro Figueras — Wed, 20 Oct 2010 10:25:33 +0000

Ya puedes seguir la actividad de chaXpert a través de twitter y de su blog.

Tomando como guía el diseño corporativo de chaXpert, hemos diseñado la imagén gráfica de el nuevo blog montado sobre Tumblr, una evolución de el “concepto blog“.

Relacionados:

Primeras imágenes de chaXpert
¿Quieres ser un BetaTester de chaXpert?
chaXpert, ya tiene imagen corporativa
Necesito a alguien de confianza. ¿eres tú?

Servidor de Máquinas virtuales remotas con Virtualbox

Sergio Carracedo — Tue, 19 Oct 2010 08:05:00 +0000

Para un desarrollador de web, es muy importante tener un entorno de desarrollo y de prueba completamente optimizado.

En el apartado de pruebas lo recomendable es que probemos nuestros desarrollos web con la mayor cantidad de navegadores posibles.

Si como es nuestro caso, empleas Linux como sistema operativo de desarrollo, podras probar si problema la mayoria de los navegadores: Firefox, Chrome, Opera, Konqueror, etc, (incluso Safari usando wine), pero hay un navegador que se nos va a escapar y que por desgracia para la web es ampliamente utilizado: Internet Explorer.

Una posible solución es disponer de un equipo con Windows (XP,Vista, 7) con este navegador y acceder a el para realizar las pruebas. Esto supone disponer de un equipo que únicamente funcionará en Windows, con el coste que ello supone.

La solución más económica es instalar windows en una máquina virtual y realizar las pruebas desde ella. En nuestro caso usamos VirtualBox.

El problema de arrancar la maquina virutal en el mismo equipo es el consumo de recursos, sobre todo de memoria, lo que va a reducir el rendimiento del equipo y nuestra productividad.

Por ello y aprovechandonos del protoloco VRCP que implementa VirtualBox, podemos instalar la máquia virtual con windows en otro equipo de la red y acceder a la citada máquina mediante algun cliente de Terminal Server. De esta manera transladaremos la carga de recursos (procesador, memoria, etc) a otro equipo, permitiendonos además que varios usuarios utilicen la máquina virutal desde sus puestos de trabajo.

Voy a dar por hecho que ya tenemos instalada y configurada la máquina virtual en el equipo remoto (la documentación de instalación se puede consultar aqui).

Ahora accedemos por ssh al equipo en el que tenemos la máquina virtual.

ssh equipo_vm

Y arrancamos la máquina virtual pero sin interface gŕafica

VBoxHeadless -startvm “Windows 7″

Ahora ya podemos conectarnos via cliente de terminal a la máquina y realizar nuestras pruebas

Herramientas TIC para la coordinación de proyectos

Pedro Figueras — Mon, 18 Oct 2010 13:21:31 +0000

A veces, cuando nos enfrentamos a grandes proyectos en los que participan un grupo de profesionales de distintas áreas de producción, nos encontramos que algunos de los mayores problemas con los que te puedes encontrar son la comunicación y el tiempo. No siempre es posible estar todos a la vez, un día a una hora y en un sitio determinado.

En este post, hablaremos de algunas de las herramientas TIC que usamos para coordinar proyectos de este tipo, en los que podemos trabajar con personas no localizadas en la misma oficina, aportando cada uno su valor al proyecto.

REDMINE

Esta estupenda aplicación de software libre que podemos instalar en nuestro servidor, nos permite tener documentado varios proyectos a la vez. Disponemos de varias herramientas como foros, wikis, noticias, gestor de tareas, planificación, repositorio de archivos.

De esta manera, el cliente puede consultar las actas de las reuniones, las decisiones tomadas, el estado global del proyecto o tareas determinadas, aportar documentación o comentarios, etc.

Al grupo de trabajo nos facilita la consulta sobre la documentación del proyecto. Es como tener una archivador gigante en el que todos aportamos nuestro granito de hora.

Más información: Página oficial Redmine.

SKYPE

Creo que no es necesario hablar de esta herramienta de Voz IP que todos conocemos. Creo que lo interesante es el uso conceptual que se le pueda dar.

Evidentemente nos mantiene en contacto por voz a todo el equipo. Aparte de las charlas de uno a uno para resolver temas puntuales, también nos facilita las reuniones de estado de proyecto, creando una sala en la que todos podemos hablar desde el sitio que estemos con ordenador o teléfono móvil.

Una de las grandes ayudas que tiene ahora el Skype es la posibilidad de compartir el escritorio. Podemos presentar el diseño de la aplicación a distancia y hacer modificaciones al momento de la mano de nuestro cliente.

También supone un gran ahorro de costes el su uso para la formación on-line. Sin necesidad de desplazarse, ayudamos a el cliente a usar y entender el funcionamiento de los paneles de gestión.

Más información: Página oficial Skype.

DROPBOX

Cuando de lo que se trata es de pasarnos archivos entre nosotros, resulta muy efectivo Dropbox. Al igual que todas las herramientas que usamos, son accesibles desde cualquier sistema: MacOSX, Windows, Linux, Android y iPhone/iPad.

Se trata de compartir una carpeta en tu sistema con una red de usuarios. Borres, copies o modifiques los archivos que contiene esta carpeta, se actualizará automáticamente en cada uno de los sistemas que componen el grupo y viceversa.

Tiene una versión gratuíta que te ofrecen 2Gb y otra de pago que te ofrece otros servicios y más espacio en el disco duro virtual.

Su uso es muy sencillo: creas una carpeta dentro de la que has asignado para Dropbox, y le envías una invitación al usuario con quién la quieras compartir. Si simplemente quieres que tu cliente se descargue, por ejemplo, un zip con las pantallas diseñadas, hay un modo de enviarle solo un link de descarga.

En cualquiera de los dos casos, si arrastras los archivos a esta carpeta compartida, en breve ya estarán disponibles para el usuario que elijas.

Más información: Página oficial Dropbox.

YAMMER

Por último, no podía faltar una red social. Yammer está a caballo entre Facebook y Twitter. Lo mejor de cada casa. Te permite crear múltiples canales con los usuarios que quieras. Teniendo un canal para cada proyecto y asignadas en éllas las personas que participan en él, nos sirve como hilo conductor de consultas importantes para el proyecto, conversaciones y comentarios.

Se puede usar a modo de twitter con mensajes cortos que recibes automáticamente en tu móvil, avisándote además con mediante mail cuando hay actividad en el canal. Si necesitas algo más completo, puede usarse como fuese un facebook subiendo archivos, replicando determinado comentario, etc.

¿Quieres ser un BetaTester de chaXpert?

Pedro Figueras — Mon, 11 Oct 2010 13:18:19 +0000

La semana pasada comenzó su andadura chaXpert, como ya os contamos hace unos meses, un nueva red social en el que el profesor se puede convertir en alumno y el alumno en profesor.

Pues bien, si eres de los que disfrutan trasteando con las aplicaciones, esta es tu oportunidad de formar parte de un grupo exclusivo de personas que probarán chaXpert estas semanas. Podrás aportar tu experiencia en redes sociales y aplicaciones web.

Haz clic aquí para visitar su página y darte de alta.

Tendrás una invitación para ser de los primeros.

Relacionados:

chaXpert, ya tiene imagen corporativa
Necesito a alguien de confianza. ¿eres tú?

Parse de elementos HTML desde PHP para carga con AJAX

Sergio Carracedo — Thu, 09 Sep 2010 11:38:59 +0000

En algunas ocasiones nos hemos encontrado con la necesidad de dotar a la página de carga de elementos mediante ajax. Es importante partir de una web completamente funcional sin Javascript para no penalizar el SEO y a aquellos usuarios que no usan Javascript. La tentación es solicitar mediante AJAX el contenido global de la página a cargar y luego dejar que Jquery mediante selectores filtren la información que realmente vamos a actualizar en la web. Esto conlleva un exceso innecesario de trafico, ya que vamos a solicitar todo el contenido de la pagina para emplear solo una pieza de ella, ya que normalmente la cabecera, menú, etc.. son los mismos para cada una de las páginas. Para resolver esto hemos valorado dos opciones:

Construir un fichero php que solo devuelva la información que necesitamos.

Parsear directamente la salida de PHP para que solo envie a la red la información necesaria.

El primero de los casos es optimo en cuanto a carga y trafico ya que solo genera la información necesaria y no genera consultas extra a la base de datos, pero tiene un inconveniente: el mantenimiento, cualquier cambio en la lógica de la aplicación se debe hacer por duplicado en la web convencional y en el script que envía la pieza para AJAX. Y esto es un problema sobre todo en grandes aplicaciones. El segundo caso, resuleve este problema ya que partiendo del mismo código y con el paso de una variable get, PHP solo devuelve el contendido necesario eliminando el tráfico innecesario. Si empleamos algún sistema de cacheo de la salida de PHP, como es nuestro caso, eliminamos las consultas extras para componer el resto de la página que no vamos a necesitar. Solo penalizaremos la carga de memoria y CPU del servidor necesaria para el parseo del XHTML. Nosotros nos decantamos por la segunda opcion y para ello usamos http://simplehtmldom.sourceforge.net/ una herramienta que nos permite trabajar con el DOM de forma similar a como podemos hacer con JQuery. En nuestro PHP solo tenemos que añadir las siguientes lineas:

if ($_GET["selector"]) { $html = str_get_html($globalHTML); echo $html->find($selector,0)->innertext; }

Donde $globalHTML es la variable que contiene todo el HTML de la páginba, nosotros usamos habitualmente Smarty, por lo que recuperar el HTML antes de enviarlo a la salida es muy sencillo usando fetch en lugar de display Y en nuestro javascript

$("#seccionACargar").load("nuestraPagina.php?selector=#seccionACargar");

De esta forma al cargar nuestraPagina.php?selector=#seccionACargar el php no devolvera todo el HTML de la página si no que nos devolvera solo el contenido del selector ahorrando una buena candidad de bytes (o Kb) en la trasmisión de los datos. Como ya he comentado esto supone un gran ahorro con respecto a la alternativa que nos ofrece jquery

$("#seccionACargar").load("nuestraPagina.php #seccionACargar");

ya que Jquery recupera la página completa y luego realiza el parseo. Nosotros hemos usado con éxito esta técnica en www.berroguetto.com para cargar cada una de las secciones de la web, y elemento de ellas, como las noticias y cada una de las páginas de los paginadores.

Interactuando. Tipos de códigos QR

Pedro Figueras — Tue, 31 Aug 2010 16:34:33 +0000

Dentro de los códigos QR existen varios tipos que ayudarán a nuestros usuarios a usar el móvil para realizar distintas acciones: visitar nuestra página web, que lea un texto, que conecte con nuestro facebook o twitter, una localización Google Maps, SMS, datos de contacto, etc.

A continuación os mostramos algunas ejemplos:

Tipo página web

Si nuestro usuario, mediante su teléfono móvil, lee este código, se le abrirá en su navegador automáticamente y la web que hayamos codificado en el gráfico qr. En el ejemplo salta a www.pedrofigueras.com.

Tipo servicio: Twitter

Con la misma facilidad podremos hacer que el usuario visite nuestro Twitter.

Tipo servicio: Linkedin

O nuestro perfil en la red profesional Linkedin.

Tipo SMS

Qué nos envíen un SMS fácilmente, siempre con el consentimiento del usuario. No es un sistema automático.

Tipo Contacto

Aquello de… ¿Tienes una tarjeta tuya? …se queda obsoleto. Si quieres pasarle tus datos a la agenda de el teléfono móvil otra persona, solo tiene que acercar su móvil este gráfico qr y rápidamente tu ficha de contacto formará parte de su agenda. Esta operación dependerá en gran medida de el terminal y del software que uséis para leer éstos códigos.

Tipo Google Maps.

Mostrar una situación sobre Google Maps.

Tipo Texto.

Podemos mostrar al usuario un párrafo de texto usando este tipo de código. Por ejemplo, información sobre algún producto.

Como muestra, creo con los que hemos expuesto, tenemos mas que suficiente. En futuros post, iremos mostrando coomo para dejar rienda suelta a la creatividad a la hora del uso.

Relacionados

Software lector de códigos QR
Los códigos QR

Usabilidad: Notificaciones en el título de la página

Sergio Carracedo — Wed, 25 Aug 2010 16:34:17 +0000

Hoy en dia la mayoria de los usuarios cuando estamos navegando tenemos abiertas simultaneamente varias pestañas en el navegador. A veces nuestra aplicación web necesita llamar la atención del usuario para requerir de el una acción o simplemente hacerle sabes que ha recibido una notificación.

Una buena manera de hacerlo es cambiar alternativamente el título de la página por un aviso, de la misma forma que hace facebook cuando recibimos una notificación de chat; el título de la página cambia 3 o 4 veces entre “Facebook….” y “Fulanito te ha enviado un mensaje”.

Para facilitar esta, a simple vista tarea, hemos crado un plugin de jQuery muy sencillo de utilizar. Solo tenemos que pasarle como parámetro, el mensaje de aviso que se va a alternar con el título original de la página.

Podemos pasarle como opciones el número de repeticiones del cambio y el tiempo (en milisegundos) entre cambios.

$.titleBlink(“Tienes un nuevo correo”,{repeat: 10,delay: 1000});

Os dejo el código fuente del pluign o podeis descargarlo directamente aquí

/**

* Title blink for web pages that allow to change title page blinks like facebook chat notificacion

*

* This file is part of jquery.titleBlink

*

* jquery.titleBlink is free software: you can redistribute it and/or modify it under

* the terms of the GNU Lesser General Public License as published by the Free

* Software Foundation, either version 3 of the License, or (at your option)

* any later version.

*

* jquery.titleBlink is distributed in the hope that it will be useful, but WITHOUT ANY

* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS

* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for

* more details.

*

* You should have received a copy of the GNU Lesser General Public License

* along with jquery.titleBlink. If not, see .

*

* @author Sergio Carracedo Martinez

* @copyright 2010 Sergio Carracedo Martinez

* @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LGPL 3.0

* @version SVN: $Id: jquery.titleBlink.js 1 2010-08-25 17:44:00Z gasman406f $

*/

jQuery.extend({

titleBlink : function(title,options) {

var defaults = {

repeat : 5,

delay : 800

};

var options = $.extend(defaults, options);

var repeatCount=0;

var currentTitle=$(document).attr("title");

var blinkInterval=setInterval(function() {

if($(document).attr("title")==currentTitle) {

$(document).attr("title",title);

} else {

$(document).attr("title",currentTitle);

repeatCount++;

if (repeatCount==options.repeat) {

clearInterval(blinkInterval);

}

}

}, options.delay);

}

})

Los códigos QR

Pedro Figueras — Thu, 19 Aug 2010 18:14:33 +0000

Desde hace ya bastante tiempo, en Opsou hemos apostado por seguir los avances y aplicaciones de esta tecnología. Nos parece una magnífica puerta de enlace entre el mundo físico y el digital.

Nos permitirá interactuar más fácil y rápidamente con nuestro entorno, solo con apuntar nuestro móvil contra algo que estemos viendo, accederemos a todo un mundo de conocimiento relacionado con él.

Explicado de un modo muy básico, se trata de una imagen cuadrada llena de puntos blancos o negros, en la que hay codificada información. Dependiendo de el número de puntos o celdas y la redundancia elegida podremos almacenar entre 25 y 4.296 caracteres.

La redundancia es un parámetro que nos ayudará en el caso de que la imagen se deteriore. Cuanto mayor sea este nivel, menos caracteres podremos codificar, pero tendremos más posibilidades de recuperar el contenido de nuestro Código QR. Incluso con un 30% deteriorado nos permitiría acceder a los datos.

Una de las ventajas que ofrece este código bidimensional con respecto a otros similares, incluido el clásico código de barras, es su capacidad de almacenar gran número de caracteres, poder ser leído en cualquier sentido debido a sus puntos de detección que lo hacen gráficamente tan reconocible y su licencia de uso.

Los Códigos QR fueron desarrollados por la firma japonesa Denso-Wave en 1994, pasando en el año 2000 a ser el estándar internacional ISO (ISO/IEC 18004) y liberando posteriormente la patente. Esto supone que podremos integrarlo en nuestros procesos tranquilamente sin miedo a que nadie en el futuro nos chantajee mediante el pago de licencias y así poner en peligro nuestra productividad.

Al Igual que hizo IBM en su tiempo permitiendo que cualquiera pudiera montar su PC y comercializarlo, el hecho de que la patente sea libre facilitará su rápida difusión.

Aunque su popularidad comenzó en Japón, gracias al desarrollo del software que permite leerlos con teléfono móvil y la apuesta de la operadora japonesa de móviles Do Co Mo por esta tecnología, su expansión hacia Europa se ha hecho imparable a raíz de su integración en campañas publicitarias. En los siguientes post iremos mostrando distintas aplicaciones en la vida real.

Existen muchas aplicaciones lectoras para móviles iPhone, Android, Nokia, Blackberry. Nosotros usamos QuickMark y Barcode Scanner. Tanto en iTunes como en Android Marquet, podéis encontrar varias gratuitas con los que hacer pruebas perfectamente.

Esto es el comienzo. En poco tiempo veremos estos códigos integrados en nuestro día a día.

La seguridad informática en la PYME

Sergio Carracedo — Sun, 11 Jul 2010 14:48:13 +0000

Recientemente me ha llegado el caso de una empresa, en la cual hay un equipo informático que hace funciones de POS, además de usarse para correo electrónico, navegar por internet, y demas tareas administrativas.

Un dia, y de repente (como suelen ocurrir estas cosas), el ordenador dejó de funcionar. Tras llevarlo a un servicio técnico el resultado fúe el de que el disco duro estaba irreparablemente dañado, y en ese momento empiezan los tirones de pelos, los problemas, el tener casi paralizado el negocio. Por supuesto no existian copias de seguridad, ni de los programas usados, ni de los datos (correos electronicos, tarifas, listados, etc)

Un problema de esta índole supone unos costes muy importantes para cualquier empresa, no solo en reposición de los equipos dañados, ni en asesoramiento tecnológico, si no en perdidas de datos y de productividad, en algunos casos estas perdidas de productividad pueden llegar a la paralización completa de la actividad y en los casos de perdidas de datos incluso podríamos incurrir en resposabilidades por incumplimientos con terceros. Imaginemos el caso de una asesoria que perdiera los datos de sus clientes, prefiriria ni pensarlo…

Esta situación me ha llevado a escribir este post, intentando fijar una serie de recomendaciones a seguir en las empresas para evitar tener que resolver el problema cuando este ya se ha producido.

Identificar los lugares (carpetas y ficheros), donde se almacenan los datos sensibles.

Identificar y catalogar los programa usados que tendriamos que reinstalar si fuese necesario.

Si es posible duplicar los datos en la misma ubicación. Lo ideal seria tener un sistema de discos duros RAID en modo espejo, si un disco duro falla, podemos continuar trabajando con el otro (que tiene los mismo datos) y remplezar el averiado sin problemas, ni disminución de la productibidad.

Realizar al menos dos copias de seguridad (backups) diarias, una debe quedar almacenada en la mismo local, para acceder a ella rápidamente si es necesario y otra desubicada, a ser posible fuera de la misma ciudad. Explico por que: Si tenemos las copias de seguridad en el mismo local (aunque sea en una caja fuerte) si nos roban el ordenador y la copia o si se produce un incendio o inundación perderemos el original y la copia, por ello debe existir una copia lo más alejada geográficamente del local. Para esto podemos contratar una empresa especializada o usar servicio en la nube, como dropbox, ubuntu one, etc, que nos permiten almacenar los datos en sus servidores, y estos a su vez disponen de copias de seguridad.

Tener un buen personal o empresa de informática que pueda reaccionar y resolver el problema de forma rápida.

Muchas empresas pensarán que todo esto en muy caro, pero no creo que supere los 100-200€/mes, os habeis parado a pensar cuanto le costaría a una empresa estar completamente paralizada 2 o 3 dias, porque sus sistema informático no funciona?

Antes de terminar me gustaria hacer recomendar el uso IMAP como protocolo de email, en lugar de POP. ya que IMAP nos permite sincronizar el correo entre varios equipos, móviles, etc y tener todos nuestros correos (recibidos y enviados) almacenados en el servidor.

Relaciones N:M:Ñ en Bases de datos

Sergio Carracedo — Tue, 06 Jul 2010 16:45:22 +0000

NOTA: Esta entrada esta extraida de una nota publicada en mi perfil de facebook el 20 de Marzo de 2009

La estructura clásica de las bases de datos relacionales nos permite establecer relaciones 1:1, 1:N y N:M (además de las reflexivas) entre tablas, esto fue un gran avance respecto a las bases de datos jerarquicas (muy usadas en la industria) que solo permitian relaciones 1:1 y 1:N.
Con este paradigma tenemos una limitación que solo nos permite tener relaciones entre tablas de forma fija.

A veces nos interesa que una tabla se relacione con un número indeterminado de otras tablas. Podemos poner como ejemplo de esto una tabla de comentarios, estos comentarios serian sobre una tabla de entradas de noticias (por ejemplo), esto lo resolveriamos añadiendo una clave foranea a la tabla de noticias que relacione los comentarios con esto.

Si más adelante tuvieramos que permitir comentar al autor de la entrada (noticia), podriamos resolverlo creando un nueva tabla para los comentarios sobre el autor.

Si entendemos las tablas de una base de datos como entidades, adquien un significado más alla de las relaciones y de los datos que almacen. Imaginemos el caso en el que tengamos varias tablas (noticias, autores, usuarios, productos,…..) que ueremso que se puedan comentar, con el modo clásico tendriamos que crear una tabla de comentarios para cada una de estas tablas, pero ¿que sucede si en lugar de 4 tabla tenemos 10? ¿o 20? ¿o mañana podria habar 3 mas que deseamos que se puedan comentar?: La solución posible seria emplear una única tabla de comentarios para todas esas tablas que permita relacionar la tupla del comentario con la tabla correspoendiente.

Para ello el sistema que propongo se basa en no establecer una relacion directa entre tablas del modo clasico, si no que almacenariamos en la tupla del comentario la tabla y la clave foranea de esa tabla para poder relacionarla con una estrucfutra similar a esta:

CREATE TABLE `comentario` (
`id_comentario` int(11) unsigned NOT NULL auto_increment,
`id` int(11) unsigned default NULL,
`tabla` char(100) default NULL,
`comentario` longtext character set utf8
PRIMARY KEY (`id_comentario`)
) ENGINE=MyISAM

Donde id es el id de la entrada que se comentar relativo a la tabla que se alamacena en el campo tabla.

Para obterner los comentarios relativos a la tabla ‘noticias’ y entrada 1000 bastaria con realizar una consulta como esta:

SELECT * FROM comentario WHERE tabla=’noticias’ AND id=1000;

Podriamos incluso obtener los resultados de los comentarios en la consulta relacionada

SELECT * FROM noticia n INNER JOIN comentario c ON n.id_noticia=c.id WHERE tabla=’noticias’ AND id=1000;

Obviamente la carga sobre la base de datos es algo mayor que en el uso del sistema clásico, pero la flexibilidad que nos aporta la supera con creces.

Consulta multitabla vs Multiples consultas monotabla

Sergio Carracedo — Tue, 06 Jul 2010 09:03:24 +0000

NOTA: Esta entrada esta extraida de una nota publicada en mi perfil de facebook el 3 de Diciembre de 2009

¿Que es una consulta multitabla?

Como su nombre indica es una consulta SQL que requiere del varias tablas para obtener los resultados, como ejemplo imagenimos que tenemos una tabal que contiene los post de un blog y otra que contiene los autores. La consulta para obterner un post y los datos de sus autores seria algo como esto:

SELECT * FROM post P INNER JOIN autorPost as AP ON P.id_post=AP.id_post INNER JOIN autor A ON AP.id_autor=A.id_post WHERE P.id_post=1

Notese que hemos consultado a 3 tablas simultaneamente.

A nivel de código, es muy sencillo obtener los datos con una simple consulta multitabla.

Consultas multiple monotabla

Este tipo de consultas, más que un tipo se refiere a una filosofia, en un post anterior ya hable de encapsular cada tabla en una clase de PHP (u otro lenguaje), lo que nos permite una mayor consitencia en el acceso a los datos. En este caso lo que solemos hacer es que cada coluna de los resultados se parsea en la clase, añadiendo los datos de otras tablas si fuese necesario.

Veamos el ejemplo anterior siguiendo este método:

1º Consultamos los datos del post
SELECT * FROM post WHERE id_post=1
Almacenamos los datos en un array: $post

2º Consultamos los autores del post (en este caso como hay una tabla intermedia al ser una relacion N:M) obtenemos sus id’s
SELECT id_autor FROM autorPost WHERE id_post=1
Guardamos en un array los id’s de los autohres relacionados.

3º Consultamos a la tabla de autores los datos de los filtrados de la consulta anterior
SELECT * FROM autor WHERE id_autor=$id_autor
Esta consulta se ejecutara tantas veces como autores devuelva la consulta del punto 2º, imaginemos que sean 3.

4º Ahora juntamos todo: en la varialbe que guarda los datos del post ($post) creamos un subarray que guarde los datos del autor, de forma que podriamos acceder a los datos de un autor del post de la forma $post["autores"][0]["nombre"].

Hemos realizado 5 consultas para lo mismo que en el método anterior requeria una única consulta.

Pero esto tiene varias ventajas:

Tenemos una estructura mas accesible a los datos

Podemos repetir este proceso para recoger los datos de, por ejemplo, los comentarios, las fotos, … asociados a ese post repitiendo el método de una forma mucho mas sencilla

Y lo más importante: aunque pueda ser contradictorio, para grandes bases de dátos este método es más rápido y carga menos el servidor. ¿Por qué?.

Pues porque mysql, como otros servidores de bases de datos, cachean las consultas, y es mas sencillo de cachear una simple consulta a una tabla, que una consulta multitabla, eso sin contar con que es mucho más probable que una consulta monotable, se pueda obtener de la cache que una multitabla.

Repito, aunque puede parecer contradictorio la experiencia me ha demostrado que son mucho más rápidas, ademas de ser mucho más facil crear una capa de abstraccion mediante clases de los datos.

Objecto “Options” como parámetro de funciones en PHP

Sergio Carracedo — Sat, 10 Apr 2010 09:18:12 +0000

PHP es un lenguaje muy flexible que permite desarrollar desde aplicaciones muy sencillas a grandes aplicaciones como puede ser Facebook.

Cuando desarrollamos una aplicación y esta va creciendo con el tiempo, nos podemos encontrar que vamos añadiendo nuevos parámetros a nuestras funciones, siempre manteniendo los anteriores por compatibilidad, complicando cada vez más la legibilidad del código.

Imaginemos que tenemos la siguente función que hace una búsqueda en la base de datos

function search($string) {
//Do something
}

Con el tiempo puede que necesitemos que sea más refinada y que nos permita hacer paginado, pero como es lógico necesitamos que sea compatible con todas las llamadas que ya tenemos en nuestro programa, entonces haríamos lo siguente:

function search($string,$start=null,$count=null) {
//Do something
}

Lógicamente la función maneja correctamente cunado estas nuevas variables tiene valor, si no se comporta como antes.

Vamos un poco más allá, ahora necesitamos que además podamos filtrar los resultados por fecha, añadiríamos entonces otro parámetro

function search($string,$start=null,$count=null,$date=null) {
//Do something
}

La cosa se empieza a complicar, imaginemos ahora que queremos que nos devuelva los datos de una fecha, entonces la llamada a la función serian de lo más esperpentica:

search(null,null,null,”2010/12/23″);

Imaginaros esto cuando la función sigue creciendo en parámetros, puede ser una locura.

Bien mi forma de resolver esto esta inspirada en Javascript, por ejemplo en como pasa JQuery los parámetros a los plugins, esto es pasando un objeto que a su vez contiene todos los parámetros, además podemos establecer los valores por defecto para cada parámetro.

PHP presenta un pequeño inconveniente, no se puede instanciar la clase base Object, es decir no podemos hacer un:

$obj = new Object();

Tampoco podemos usar la notación de objectos de javascript:

var obj = { param1 : 1, params2: 3, param4: 6}

Para resolver esto he creado una clase que resuelve estos contratiempo:

class options {
public function __construct($optionsArray=array()) {
oreach($optionsArray as $paramName => $paramValue) {
$this->$paramName=$paramValue;
}
}
}
?>

Para aplicar a la función del ejemplo extenderíamos esta clase con los parámetros concretos de la función:

class myFunctionOptions extends options {
public $start= null;
public $count= null;
public $data = null;
}

y rescribiríamos la función de la siguiente forma:

function search($string,$option=null) {
if (!isset($options)) {
$options= new myFunctionOptions();
}
// Do something
}

Y la llamada a la función sería de la siguiente forma:

search(“string”,new myFunctionOptions(array(“start”=>1,”count”=>10,”date”=>”2010/04/10″));

Fijémonos en dos puntos:

Los parámetros obligatorios de la funcion se quedan fuera del objeto options

No es necesario dar valor a todos los atributos del objeto options, si dejamos sin definir alguno de ellos, siempre estará definido con el valor por defecto de la definición de la clase.

Si en el futuro nuestra función sigue necesitando añadir parámetros podremos hacerlo de forma sencilla en el objeto myFunctionOptions, manteniendo siempre una buena legibilidad del código fuente.

Tutorial: Retrato con tipografía

Nieves Prado — Fri, 26 Mar 2010 13:28:38 +0000

En este nuevo post os ayudaremos a crear ilustraciones con tipografías.

Con motivo de la creación de la nueva web de Berrogüetto, creamos retratos de todos los integrantes del grupo. Con un trabajo de chinos, letra a letra fuimos formando cada personaje.

En tres pasos intentaremos resumir como realizar este tipo de ilustraciones. El truco es técnica y paciencia.

Paso 1: Elección de la foto original

Un original influye positivamente o negativamente sobre el resultado final del proyecto. Partir de una imagen de calidad, que tenga fuertes contrastes entre los volúmenes iluminados y ensombrecidos, ayudará a resaltar los detalles más importantes.

Es importante que el fondo se diferencie lo máximo posible de la figura con el que vamos a trabajar, tanto en luminosidad como en saturación.

Paso 2: Imagen de guía

Si el fondo no se separa lo suficiente de la figura, tendremos que siluetear la figura y borrar el fondo.

Una vez hecho es paso, debemos aplicarle a la imagen un efecto Umbral. Ajustando manualmente el porcentaje crearemos una imagen más simple. Buscamos un efecto del tipo “Che Güevara” de toda la vida.

Puede que tengamos que corregir selectivamente algunas zonas que vemos que se pierden detalles, porque se oscurecen o se aclaran en exceso.

Paso 3: La ilustración

Para comenzar a crear la ilustración, necesitamos tener de fondo la imagen generada en el paso anterior. Si la ponemos de fondo y en color gris claro, nos servirá de guía.

Creamos distintos grupos de letras de varios tamaños y diferentes orientaciones, para ir formando tipos de manchas. Es importante que las letras nunca se toquen.

Teniendo varios elementos de este tipo, empezamos a cubrir toda la zona de sombra con estos grupos de letras. Para conseguir el efecto de volumen en la ilustración, usamos la técnica de que las partes más cercanas al observador van grandes y las más alejadas, más pequeñas.

Diferenciamos las zonas, compactando y juntando más las letras, sin llegar a que se superpongan. Los perfiles de línea, en las áreas muy claras, se consiguen con letras más separadas y pequeñas, intentando formar líneas manualmente.

Como toque final, podemos romper la homogeneidad de la ilustración, introduciendo letras más grandes que la media (a). Tener en cuenta que el ojo tiende a hacer grupos con las letras, así que usar pocas, separadas, giradas y sin sentido.

También podemos conseguir una imagen más suelta y menos estática si las letras no componen la figura cerrada, dejando al azar letras por zonas del contorno (b).

Espero que os ayude este tutorial y si necesitáis alguna aclaración no dudéis en preguntar.

Versión iPhone / Android de una web

Sergio Carracedo — Wed, 24 Mar 2010 12:16:16 +0000

Recientemente nos surgió la necesidad de crear una versión para dispositivos móviles de la web de uno de nuestros clientes www.anosaterra.org. Pensamos en varias opciones, y en que dispositivos usarían los visitantes para navegar pos esta versión móvil.

Sin querer dejar de lado a nadie, observamos que la mayor parte de la navegación móvil del portal venia de “iPhones” y “Androides”, y sabiendo que los navegadores de estos dispositivos son de la familia Webkit, decidimos crear una versión optimizada para los ellos.

Para la parte gráfica creemos que lo más conveniente era una interface familiar, por ello decidimos emplear el Framework CSS (UiUIKit) que emula la interface gráfica de las aplicaciones nativas de iphone, y aunque se navegue desde otro dispositivo no iphone la experiencia de usuarios sigue siendo muy buena.

Nuestra recomendación a nivel de portales web, donde el contenido prime sobre la gráfica, es crear siempre una versión móvil de la web, ya que en estos últimos años la navegación con dispositivos móviles a crecido espectacularmente, y lo seguira haciendo. Y desde luego si el usuario se encuentra cómodo leyendo su web desde el movil es más facil fidelizarlo y que se quede.

El resultado de este trabajo lo podeis comprobar en http://www.anosaterra.org/iphone

Esperamos vuestros comentarios sobre la experiencia con otros dispositivos.

Etiquetado de fotos de forma similar a facebook con jquery

Sergio Carracedo — Sat, 27 Feb 2010 12:12:10 +0000

Cuando se posee una gran cantidad de material multimedia, es necesario catalogarla y etiquetarla para que la búsqueda de cualquier recurso sea sencilla. Un gran paso que hemos visto en las redes como facebook, es el etiquetado de personas dentro de las fotos, en nuestro caso esto permite hacer búsquedas de personas dentro de nuestro mediacenter™.

Para llevar a cabo el etiquetado hemos desarrollado un plugin de jQuery que se integra a la perfección con jQueryUI y que permite realizar dicha función.

Es una versión alpha por lo que ciertas funcionalidades aún no están activas como:

Soporte de idiomas

Estilo propio, independiente de jQueryUI

Pinchar aqui para ver la demo

En unas semanas iremos actualizando con las novedades.