Webcam input to mosaic of favicons software for Windows. Download it here.

Programa para ver las imágenes de tu webcam como un mosaico de faviconos. Puedes descargarlo aquí.

(versión en castellano abajo)

I found an interesting article by Ask the CSS Guy about one pixel notched corners CSS trick used by Google. In this article, the CSS Guy show us how Google did it, using <li><a><b><b><b>Option</b></b></b></a></li>. The CSS guy was able to do it with only 2 nested <b>. I just thought that even if it was a better way than Google did, two <b>s doesn’t look good enough… so I had to try to do it better.

I’ve done it with just one <b>:  <li><a><b>Option</b></a></li>, so the semantic meaning remains intact. It is crossbrowser (tested and pixel perfect in 12 browsers, IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), and also the same code could be used as quirks or strict mode without changes. Of course, the xhtml strict version pass the W3C validation.

Quirks mode version
Xhtml stric mode version

Castellano

En un interesante artículo de Ask the CSS Guy se explicaba cómo Google Analytics crea bordes redondeados de un pixel sin imágenes y sólo CSS. Para ello Google usa una estructura <li><a><b><b><b>Option</b></b></b></a></li>. El Chico CSS fue capaz de mejorar dicha estructura reduciendo el número de <b>s a sólo 2. Pensé que se podía hacer aún mejor, y me puse a intentarlo.

Finalmente he conseguido que sólo tenga una <b>; <li><a><b>Option</b></a></li>, de esta forma se mantiene la semántica. Es crossbrowser (probado y renderizando con resultados totalmente idénticos en 12 navegadores: IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), y el mismo código se puede usar tanto en modo quirks como strict sin cambios. Por supuesto, la versión xhtml estricta valida según la W3C.

Ie7+ FF2+ Opera9 Safari3 …

Realmente no se qué decir sobre esto… pero… ¿a que es bonito? :)
I don’t have an idea to write about this but… it is beatiful, isn’t it? :)

(texto en castellano abajo)

After drawing in CSS (see Homer CSS and Bush CSS), a generator software for CSS Art (jpeg2css) and animated CSS art (CSS-Cola), what to do next?

Pacman CSS uses no images, only pure vectorial and rescalable CSS art composed of hundreds of Verdana font characters, and javascript code for animation and game. It is less than 9kb uncompressed -less than 3 with zip compression-.

It requires a browser with javascript enabled and the Verdana font installed. It has been tested in 11 different browsers, Internet Explorer 5.5 to 8, Firefox 2 and 3, Opera 9, Safari 3, Maxthon 1.6 and 2 and Flock, working on all. To IE 8 beta users: use IE7 emulation to run it (without the emulation it works, but too slow, it takes several seconds to start and generates very few images per second -I assume it is a problem with the beta IE  version-)

Push the START GAME button to play it!

Castellano

Tras dibujar en CSS (ver Homer CSS y Bush CSS), un software generador de arte CSS (jpeg2css) y arte CSS animado (CSS-Cola), ¿qué sería lo siguiente?

Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana, y código javascript para la animación y el juego. Ocupa menos de 9kb descomprimido (y menos de 3kb con zip).

Requiere un navegador con javascript y la fuente Verdana instalada. Ha sido probado en 11 navegadores distintos; Internet Explorer de 5.5 a 8, Firefox 2 y 3, Opera 9, Safari 3, Maxthon 1.6 y 2 y Flock, funcionando en todos. A los usuarios de IE 8 beta: jugad con la emulación de IE7 activa (sin la emulación funciona, pero demasiado lento; tarda varios segundos en empezar y genera muy pocas imágenes por segundo… supongo que es un problema de la beta de IE)

¡Pulsad el botón START GAME para jugar!

Agradecimientos a Xero por su apoyo moral durante la realización del juego y el beta-testing.

Varias personas se han interesado por cuáles son mis fuentes de inspiración. Además de consumir arte de todo tipo y mantenerme informado sobre novedades tecnológicas, hay varios “truquitos” que uso habitualmente y he creido conveniente publicarlos en forma de consejos:

1) Anota todas las ideas que tengas. No te preocupes de si la idea es o no realizable, de si sería o no rentable o de si es absurda; simplemente anótalas todas. Ten siempre a mano material para realizar las anotaciones.

2) Revisa las ideas anotadas de vez en cuando. Muchas veces la gran idea surge de mezclar varias ideas existentes o de modificar alguna de ellas.

3) Pide opinión y escucha a tus personas cercanas. No es necesario que la persona a la que pides opinión sea entendida del tema. A veces te ofrecerán buenas ideas, otras la simple charla sobre el tema te servirá de inspiración.

4) Ante la sensación de mente en blanco: da un paseo. Yo suelo salir a caminar alrededor de media hora. Cuando regreso estoy más despejado y con nuevas ideas. Supongo que cualquier actividad similar, que implique ejercicio leve/moderado y poca actividad mental consciente debería ofrecer resultados similares.

5) Crea borradores rápidos. A la hora de realizar alguna idea concreta, hacer un boceto rápido, que tome pocos segundos o minutos y que incluya la estructura básica de la idea ayuda enormemente a su posterior definición detallada y realización. En mi caso uso una pizarra; dispone de bastante espacio y se puede borrar con facilidad.

6) Distribuye el trabajo entre varias sesiones. Por regla general, si realizamos un trabajo en tres sesiones de dos horas en días diferentes en vez de en sólo una sesión de seis horas el mismo día, los resultados serán mejores. Concretamente, en trabajos visuales existe el problema de que, cuando llevamos varias horas seguidas trabajando, “el ojo se acostumbra a lo que ve”, y dejamos de percibir errores con facilidad. Parando y retomándolo unas horas o un día más tarde, cambia la forma de percepción por completo.

Creo que eso es todo… ¡Ánimo y suerte con vuestros proyectos!

(see English version below) 

Bastantes personas me han sugerido que realice algún tipo de tutorial de CSS y programación web. De estas sugerencias he decidido ir publicando ejemplos de casos prácticos de desarrollo web, realizados con css y xhtml estricto, accesible, semántico, que funcione en la mayor cantidad de navegadores posibles sin hacks y, por supuesto, que valide.

Mapa con areas que se iluminan

En gran cantidad de webs es necesaria la selección geográfica. Además de ser útiles para tal fin, por regla general, los mapas aportan valor estético al website y consolidan la imagen de empresa.

Al realizar estos mapas con xhtml semántico y no en Flash, aumentamos en gran medida la accesibilidad y Google (y otros buscadores) podrá recorrer todo el website sin problema. Suponiendo que se tratase un mapa de Europa para selección de país, se podrían ordenar alfabeticamente los <li> que conforman los paises y resultaría de gran utilidad en navegadores en modo texto o hablado.

El mapa de ejemplo ha sido validado y probado su correcto funcionamiento en los siguientes navegadores:

Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock y Links 0.98
Linux (Kubuntu): Konqueror 3.5.9

Bajo Windows ha sido probado también en Maxthon 1.6 y 2.1, y funcionando correctamente siempre que no se haga zoom (en ese caso se desplazan las areas seleccionables). En IE 5.5 no pierde la funcionalidad; las areas siguen siendo pulsables, pero no se iluminan (es un problema de IE 5.5 con el xhtml strict).

Descargar este ejemplo

English

Several people asked me for tutorials on CSS and web coding. I’ve decided to publish practical examples in web development, done with css, semantic, accessible and stric xhtml, working in the highest number of browsers as possible without hacks and, of course, valid.

Map with highlight on hover

Lots of websites require a geographic area selection. Not only useful for that matter, usually maps add great aesthetic value to a website.

Creating maps with semantic xhtml and not in Flash, accessibility is highly increased and Google (such as other search engines) will be able to spider all your website without problems. In the case you create, for example, an Europe map for country selection, you could even alphabetically order the contry <li>s and would result of great utility in text/voice mode browsers.

The example’s map has been validated and tested in the next browsers:

Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock and Links 0.98
Linux (Kubuntu): Konqueror 3.5.9

Under Windows, it has been also tested in Maxthon 1.6 and 2.1, working correctly if not zoomed (in that case the areas get displaced). In IE 5.5 doesn’t loose its functionality, but the areas are not highlighted (this is a problem with IE 5.5 and strict xhtml).

Download this example

(see English version below)

¿Recordáis el anuncio Nuevo Ipod Nano aparecido el año pasado? Cuando lo vi pensé que sería posible realizar un efecto similar en tiempo real con una webcam. La idea se me olvidó y no la he recordado hasta hoy.

¿Cómo funciona? Simplemente tenéis que apagar las luces la habitación, coger un teléfono móvil, un ipod, una linterna, o cualquier aparato que emita suficiente luz, conectar la webcam, ejecutar el programa y apuntar a la cámara con la parte iluminada del objeto. Aparece una pantalla de configuración de la webcam, lo ideal es que capture a 30 fps y a 320×240 píxeles (probablemente la configuración que aparecerá por defecto).

No está muy terminado aún, pero, como suele pasar con este tipo de programas, es bastante entretenido (he dedicado más tiempo a jugar con él que a programarlo), así que por eso lo publico.

Es para Windows, supongo que requiere un ordenador potente (de hace unos 3 años o menos; no está optimizado). Tened en cuenta que es una versión alpha y no tiene por qué funcionar, así que ejecutadlo bajo vuestra responsabilidad.

Descargar RTLightBeams

English

Do you remember New Ipod Nano Ad released last year? Today I’ve just done a similar effect in realtime. Just connect your webcam, turn room’s lights off, execute the program and point to your camera with a lighting object (such as a cellular phone, an ipod, a lantern…).

When executing the program, a webcam configuration window will appear. I suppose the program would ideally work with 320×240 pixels and 30 frames per second capturing. It will probably be the default settings, so just click “Ok” on that window.

This program is an alpha version, done today in few hours, just for fun. So, it is not very finished. I’ve published it because it is fun (I’ve been more time playing with it than coding it). But, don’t expect it even to work correctly in your computer.

It have passed antivirus tests with no virus found, is just for Windows, and I think it would require a fast computer (3 years old or less). Use it at your own risk.

Download RTLightBeams

(see English version below)

Hoy se cumple mi primer mes como blogger y he decidido publicar un sumario:

- 770.000+ páginas vistas
- 330.000+ visitas únicas
- 9.960 links entrantes a mi dominio según Yahoo
- 565 comentarios
- 139 e-mails respondidos en referencia a contenidos del blog
- 40 logotipos gratis realizados
- 23 posts
- 2 caidas de mi servidor por alto tráfico y no tener aún cache

Mi trabajo ha aparecido en las portadas de Digg, Slashdot, Reddit, en “lo mejor de abril 2008” en Smashing Magazine, en el blog Compiler de la revista Wired, 2 veces en popular de Del.icio.us, entre otras páginas.

No puedo decir más que gracias a todos los lectores por esta espectacular acogida y que espero seguir creando contenidos que sean de vuestro agrado.

English

Today is my first month as blogger and I just decided to publish a summary:

- 770.000+ pageviews
- 330.000+ unique visitors
- 9.960 inlinks to my domain (data from Yahoo)
- 565 comments
- 139 answered e-mails related to blog contents
- 40 free logos done
- 23 posts
- 2 server downtimes due high traffic and no cache (solved right now)

My job has appeared in the frontpages of Digg, Slashdot, Reddit, in “Best of April 2008“ at Smashing Magazine, in the Compiler blog of Wired, two times in popular at Del.icio.us, and other websites.

What I can say? Just thank you all readers for this amazing wellcome yo gave me, and I hope to continue creating new contents of your interest.

(see English version below)

He diseñado esta camiseta porque me apetece llevarla este verano y no la encontré así en ningún sitio. Si os gusta y queréis comprarla, está en mi recién estrenada tienda de Cafepress. Y si os gusta, pero queréis hacerla vosotros mismos, aquí está el diseño en alta resolución.

English

I’ve designed this t-shirt because I wanted one like that, but I didn’t found it anywhere. If you like it and you want to buy it, it is at my new Cafepress shop. But, if you like it and want to do it by yourself, here is the high resolution design.