Román Cortés

Introducing Slashedit.com

4 de Noviembre del 2009

Slashedit logo 

What’s the big deal? Wikipedia have years with editable content!

Instead of Wikipedia and other websites with editable content, in Slashedit you’re not just available to edit the content; i mean, you can edit the source code! Totally edition freedom.

Welcome to the Web 3.0 guys!

First of all, you need know a few html tags, you can type in your browser http://slashedit.com/anything/edit and you will be creating your http://slashedit.com/anything page. Wow, are you serious? Yeap, that’s it. No login, no email and password, no username, just slashedit.

So, Who owns this page?!

Me! And You! And anyone that see or edit this website.

Spread the word!

Press: Let’s make something that rulz everyone together:

Slashedit logo    Slashedit banner 1    Slashedit banner 2 

Feel free to use the logo or banners in your website

A web project by Roman Cortes with a hand from Elias Sierra

Exposición colectiva ‘Entrelíneas’

28 de Mayo del 2009

El pasado viernes 22 de mayo se inauguró la exposición colectiva Entrelíneas en la Galería de Arte María Soto, en la que colaboro con un par de cuadritos.

Además de mis obras, podréis ver el interesante trabajo de Paula Castelruiz, Alberto Tarsicio, Francisco Villalobos, Javier Rueda y María Corbalán.

La exposición permanecerá abierta hasta el 16 de junio en c/ Los Padros 6, Torre del Mar, Málaga, España, con horario de lunes a viernes de 11:30 a 13:30 y de 19:30 a 21:30, y sábados de 11:30 a 13:30.

Si os interesa realizar una visita a la exposición, no dudéis en contactarme e intentaré hacer un hueco en mi agenda para mostraros mis cuadros personalmente.

Crucigrama friki

13 de Mayo del 2009

Hoy he diseñado el siguiente crucigrama:

Crucigrama Friki

Ofrezco de premio un arenque o una almáciga (a elegir) a la primera persona que lo resuelva correctamente y publique la solución (preferiblemente a bolígrafo).

Dynamic Auto-Painter

4 de Mayo del 2009

(versión en castellano abajo)

Dynamic auto-painter example

Based on my painter software Arcimbolder, the company MediaChance have released Dynamic Auto-Painter.

MediaChance took my original algorithms and have developed with them an amazing tool that turn any image or photo into different styles of paint. There are already other image-to-paint filters, but Dynamic Auto-Painter is currently the only one to give the sensation of a real painting, even from distance - just take a look of the example above, it really looks painted.

 You can download a trial version from its site here.

One of the software users, Lyle J. Kroll said: “I accidently found Arcimbolder and enjoyed playing with it, but DAP is 100 times better.”.

Some more examples with different painting styles:

 

Versión en castellano

Basándose en mi software Arcimbolder, la empresa MediaChance ha lanzado el software Dynamic Auto-Painter.

MediaChance ha usado los algoritmos de Arcimbolder para crear un programa capaz de pintar cualquier imagen o foto en diferentes estilos. A diferencia de otros filtros de pintura ya existentes, Dynamic Auto-Painter es el único programa de dar una sensación de pintura real, incluso cuando se observa el resultado desde lejos (ver la primera imagen de ejemplo del post).

 Podéis descargar una versión de prueba totalmente funcional (trial) desde su web.

Si ya conocíais Arcimbolder, os dejo traducido un comentario de uno de los usuarios de este nuevo software, Lyle J. Kroll: “Encontré casualmente Arcimbolder y disfruté jugando con él, pero DAP es 100 veces mejor”.

Tutorial: mejora el aspecto de tu web

1 de Abril del 2009

En este tutorial he recopilado los mejores trucos, consejos y secretos para darle un aspecto profesional y visualmente atractivo a vuestras páginas web.

Titulos vibrantes

1) Desde Photoshop, escribe el título que desees publicar con una fuente bonita (Comic Sans suele ofrecer buenos resultados).

2) Rasteriza la capa de texto y aplícale un bonito degradado multicolor con la herramienta de degradado.

3) Por último, aplica una sombra al texto. Las sombras siempre mejoran el resultado. Procura que la sombra sea los suficientemente intensa para que no pase desapercibida. Aquí el resultado final:

Bordes tridimensionales en imágenes

1) Toma una bonita imagen de tu mascota (preferiblemente un gato)

2) HTML y CSS soportan bonitos bordes con efecto tridimensional mediante el siguiente código: <img src=”gato.jpg” mce_src=”gato1.jpg” style=”border-style: outset; border-width: 30px”>

Iconos animados

Hay multitud de iconos gif animados disponibles en Internet. Úsalos para destacar las secciones más importantes de tu web, como en tu dirección de correo. De esta forma, al mismo tiempo que decoras tu web, ¡nadie se olvidará de escribirte!

Mejores imágenes mediante filtros de Photoshop

Existen multitud de filtros para imágenes en Photoshop. Os recomiendo: Invert, Embeed y Lens-flare.

###

Por hoy eso es todo y espero que os haya sido de gran ayuda.  Próximamente publicaré la segunda parte de este tutorial con más consejos y trucos.

¡Feliz Año Nuevo!

31 de Diciembre del 2008

Últimamente he estado bastante ocupado con diversos trabajos y apenas he podido postear. Quería felicitaros el nuevo año, recordaros que sigo aún por aquí, y que espero volver en este nuevo año a la carga con el blog en cuanto tenga algo de tiempo.

 ¡Mucha suerte y prosperidad para todos!

Tux Untooned

28 de Noviembre del 2008

Tux Untooned

Today I’ve been bored enough to untoon Tux - Linux mascot.  I hope you like the result.

Arcimbolder

9 de Noviembre del 2008

(texto en castellano)

WHAT IS ARCIMBOLDER?

Arcimbolder is my latest creation, an image filter software that recreates an image as a collage of objects from an object pack. It is inspired by the artworks of Giuseppe Arcimboldo, a 16th century painter known for creating portait heads made of fruits and vegetables.

DOWNLOAD AND USAGE

You can download Arcimbolder 0.2 alpha here. It doesn’t require installation to run, you just have to unpack all the files and directories inside the downloaded zip file and then run arcimbolder.exe. Remember that it is an experimental -alpha- version, use it at your own risk.

Main menu

In the main menu, click on “Open image” to select the image you want to filter. Then, select a Quality option, a Background color option and an Object pack option. After that, press on “Generate” to start the rendering process.

Rendering process

During the rendering process, if you can click on the rendered image, the process will temporaly stop and a “Save image” button and a original image thumbnail will appear.

By clicking on the thumbnail, you will switch view from the rendered image to the original image, so you can compare the result.

By clicking on “Save image” you can save the current result as a jpeg image.

Clicking again on the rendered image, the rendering process will continue.

The rendering process never stops by itself -you decide when the results are good enough for you.

OBJECT PACKS

There are 2 object packs included with Arcimbolder 0.2, and more will be released soon. Note that packs that are currently provided are just tests and are not yet attuned. I’m also preparing an object pack developer kit, so you can create your own packs.

Arcimboldo’s fruits & vegetables v.1

It includes 57 fruit and vegetable objects directly cropped from Arcimboldo’s paints.

Van Gogh’s brush strokes v.1

It includes 85 Van Gogh brush strokes cropped from some of his paints. The results with this object pack are
similar to oil paints.

Update on 11/10/08: AOP File Format details

QUALITY

The output quality varies depending of the Quality option selected, the object pack selected, the input image and the time you give to the rendering process.

Low: it is thought to be for a fast preview, having low precision. It should render several objects per second in an average computer.
Medium: a good average between speed and precision. It should render about one object per second in an average computer.
High: it renders with a very high precision, but it is very slow -about 1 object every 10 seconds in an average computer-. It is thought to be used only when medium quality is not enough.

BACKGROUND COLOR

It is an useful option when your input image has a flat background color. Matching the input image background color with the background color option, you will have a object-free background in your output, perfect for illustration purposes (e.g. Arcimbolder’s logo was done this way).

REQUIREMENTS

Arcimbolder requires a minimum of 512 Mb of RAM and Windows XP or Vista.
I have also tested it under Kubuntu with Wine, and it seems to work by right clicking on arcimbolder.exe - Open With - Wine.

THE TECHNOLOGY BEHIND ARCIMBOLDER

Arcimbolder uses a computer vision technique called template matching to search for the best positions of objects. Template matching is a computationally expensive task (i.e. very slow), so there are aproximation algorithms that aim to get good enough -but not the theoretically best- results in a reasonable time.

In the case of Arcimbolder, due to the avant-garde use of template matching, none of the common and already developed aproximation algorithms was useful, so I had to develop custom algorithms from scratch, ranging from adaptative Monte Carlo searchs to what I call fuzzy color histogram analysis.

Even if the current code is highly optimized, there is yet room for improvements in future versions.

TO DO LIST

- Release new object packs
- Release the object pack developer kit
- Support for different image formats and resolutions
- Use MMX for a faster memory access (I expect about 20% of speed improvement)
- SMT/Multicore version (70% of speed increase expected on dual core machines)
- Cleaning, restructuring and commenting the source code to release it as open source
- Mac OS and Linux ports

¿Novedad de Adsense?

2 de Noviembre del 2008

Acabo de ver algo muy curioso en Adsense, de lo que no tenía noticia y de lo que no he podido encontrar información al respecto. Me pregunto si soy la primera persona en percibirlo…

Parece ser que Adsense usa la cadena buscada en Google para modificar la publicidad que aparece en la página a la que se visita. Un ejemplo concreto:

Desde Google.com (versión en inglés internacional) buscad estas dos cadenas:


(las cadenas están como imagen para no modificar los resultados)

En ambas búsquedas, mi entrada de Homer CSS en el blog debería aparecer la primera entre los resultados de Google. Al entrar en esta página, la publicidad será diferente; en el segundo caso incluirá publicidad relacionada con la primera palabra de dicha cadena.

Inyecciones SQL

27 de Octubre del 2008

En el post anterior sobre seguridad web hablé sobre las inyecciones de código e incluí un ejemplo ejemplo de inyección SQL. Hoy voy a ampliar la información sobre este tipo de inyección, explicando los métodos para evitarla.

Una de las formas de evitar la inyección SQL es validar los datos enviados por el usuario antes de realizar cualquier acceso a la base de datos; es decir, comprobar que los valores estén dentro del rango permitido por la web. Un ejemplo concreto sería una web que dispusiese de varias secciones de noticias, agrupadas en varias categorías, y que cada sección mostrase un listado de dichas noticias en su categoría.

Para ello podríamos tener una tabla noticias en la que uno de los campos fuese categoria. Supongamos que dicha categoría pudiese tomar 3 valores, por ejemplo; internacional, nacional y deportes. En este caso, el dato recibido desde el usuario sería la categoría a la que quiere acceder (podría llegar desde cualquier vía, como ejemplo por GET: www.dominio.com/noticias.php?categoria=deportes) . Si simplemente tomamos dicho dato y hacemos un SELECT * FROM noticias WHERE categoria=’$categoria’, tenemos la posibilidad de una inyección, así que antes de realizar el acceso a la base de datos, comprobaríamos que $categoria fuese uno de los 3 posibles valores, y de no ser así, terminar la ejecución del script, o mostrar una página 404 o a una página por defecto (el listado de categorías de nuevo, por ejemplo. Yo recomiendo la opción del 404, aunque no por motivos de seguridad… otro día escribiré un artículo al respecto).

No siempre se pueden validar los datos de esta forma, en bastantes ocasiones el rango permitido es demasiado amplio y/o no es fijo (por ejemplo, si se tratase de una búsqueda en los títulos de las noticias, el acceso a la base de datos sería necesario). Para este tipo de casos, mucho más frecuentes, se pueden usar dos alternativas: sanear los datos o usar sentencias preparadas.

Sanear los datos

Se trata de agregar a los datos enviados por el usuario los caracteres necesarios de escape para que la base de datos diferencie entre la sentencia SQL y los datos. Un ejemplo concreto: supongamos una tabla llamada grupos de grupos musicales en la que tengo un campo nombre. Quiero insertar al grupo Guns N’ Roses. Dado que contiene una comilla no podría hacerlo directamente, así que tendría que agregar el caracter de escape (contrabarra en MySQL) antes de la comilla, es decir: Guns N\’ Roses.

PHP dispone de varias funciones para ello. Una de ellas es general y no depende de ninguna base de datos en concreto; addslashes. Las otras son dependientes de la base de datos que usemos, en MySQL en concreto es mysql_real_escape_string.

El uso de addslashes es muy frecuente y aparece en muchos ejemplos en internet, pero tiene tres posibles problemas, dos de seguridad y uno de integridad de datos. Uno de ellos es que si la directiva de PHP magic_quotes_sybase está activada y lo usamos con una base de datos que no sea Sybase, entonces los caracteres no serán reemplazados correctamente (en principio esta directiva no tiene por qué estar activada si tenemos el hospedaje más común en php/mysql, pero si no se comprueba no se puede saber cual es su estado). Otro problema es que addslashes no contempla todos los tipos de escape que MySQL requiere para ficheros binarios, no es un problema de seguridad como tal, pero sería un problema de integridad de datos a la hora de insertar, por ejemplo, ficheros directamente en la base de datos.

Por último, existe un problema con addslashes cuando una tabla en la base de datos está creada para ciertos tipos de codificación de caracteres multibyte, por ejemplo para el chino simplificado GBK. Addslashes funciona byte por byte, agregando la contrabarra siempre que encuentre un valor de byte que se corresponda con los que escapa. En GBK existen caracteres que ocupan más de un byte y cuyo último byte se corresponde con la contrabarra, por ejemplo: ¿\  (nota: si estos dos caracteres se mostrasen en GBK, se vería un caracter chino). Si aplico addslashes a ¿’ obtengo ¿\’ . Al realizar un acceso a la base de datos en la tabla GBK, leerá un caracter multibyte y una comilla, y aquí tenemos el problema. Si la codificación es latin-1 o UTF-8 no hay problema alguno.

Mysql_real_escape_string, pese a tener menos problemas que addslashes, también está sujeto a los problemas de codificación multibyte. En las versiones más recientes de MySQL ya está corregido (a partir de 5.0.22), pero en las anteriores trabajar con codificaciones multibyte que no sea UTF-8 puede dar problemas similares al descrito en el párrafo anterior.

Sentencias preparadas

La mejor forma de evitar los problemas descritos anteriormente, es usando de las sentencias preparadas. Mediante las sentencias preparadas, separamos la consulta SQL de los datos, enviándolos de forma separada. Para usar sentencias preparadas en PHP con MySQL, se requiere la extensión mysqli, que no se encuentra instalada por defecto (aunque estará disponible normalmente en la mayoría de los hostings). Mediante mysqli_prepare podemos crear nuestras sentencias preparadas.

Para no tener problemas con caracteres multibyte que no sean UTF-8, además de usar mysqli con sentencias preparadas, hay que comprobar que la versión de MySQL sea reciente. Si la versión no es reciente, entonces no dispondrá de soporte para sentencias preparadas y mysqli hará una simulación de dichas sentencias usando mysql_real_escape_string, teniendo exactamente el mismo problema que si se usase directamente.

Un problema reciente con MySQL

Desde hace pocas semanas se ha mostrado un nuevo problema con MySQL. Cuando realizamos un SELECT con una comparación de cadenas, los caracteres de espacio al final de la comparación no son tenidos en cuenta. Por otro lado, si en un INSERT los datos para un campo de texto ocupa más espacio que el tamaño máximo para dicho campo, será recortado. Supongamos web con registro de usuarios y una tabla usuarios con nombre (de 15 caracteres) y password:

Cuando un usuario solicita registrarse, primero compruebo que el nombre de usuario no exista. Si no existe, realizo el insert en la base de datos.

Supongamos que ya existe un usuario con nombre admin. Alguien intenta registrarse con nombre “admin          1″ (admin seguido de 10 espacios y un 1). Al realizar el select para comprobar si existe el usuario, dado que el tamaño máximo para nombre es 15 y mi entrada tiene 16 caracteres, no devolverá ningún resultado, por tanto supondrá que dicho usuario no existe, y procederá a la inserción. En la inserción, el dato será recortado, quedando como admin seguido de 10 espacios.

Al registrarme en la web, podré usar directamente “admin”, sin espacios pero con la clave que ya conozco, dado que un select no tendrá en cuenta los espacios. Si más tarde el script hace otra consulta a la tabla de usuarios usando sólo el nombre “admin”, el resultado que devolverá será el primero que encuentre, es decir, el original.

Bien, para que todo esto resulte un problema, se tienen que dar una serie de circunstancias muy concretas, pero es un riesgo de seguridad en cualquier caso. Las medidas a tomar son las de medir la longitud máxima por cada dato que envía el usuario.

Nota: si el nombre de usuario es primary key no hay problema, dado que MySQL no permitiría la inserción como ocurriría en un campo que no lo fuese. Por otro lado, si no es primary key, pero no tenemos en cuenta el nombre de usuario sino su id durante el resto de la ejecución del script, tampoco sería un problema.

Para finalizar, magic_quotes_gpc

PHP tiene una opción (magic_quotes_gpc) mediante la cual los datos recibidos desde el usuario (get/post/cookie) son pasados por addslashes antes de la ejecución del script. Esta opción está desaconsejada y en la versión 6 de PHP ha sido eliminada, pero aún así, por motivos de compatibilidad con código ya existente, los servidores de hosting suelen seguir teniéndola activada.

En el caso de que esté activada, para no tener datos escapados por duplicado, tendremos que comprobar si están activadas mediante get_magic_quotes_gpc, y en el caso de que lo estén, realizar un stripslashes para eliminar el escape. Si usamos consultas preparadas usaremos los datos tras estos pasos directamente, y si no las usamos, las volveremos a escapar mysql_real_escape_string.