12 de julio 2014    /   CREATIVIDAD
por
 

Un retrato de Marge Simpson con 1.000 líneas de código

12 de julio 2014    /   CREATIVIDAD     por          
Compártelo twitter facebook whatsapp
thumb image

Esto que parece código informático – y que lo es – también forma parte de un retrato de Bart Simpson:
pelo
 
Es su puntiaguda cabellera, escrita en HTML como si fuera una página web. Le falta, por supuesto, un poco de estilo. Algo como esto:
codigo2
 
Y así podríamos seguir, picando código, hasta dibujar su cabeza al completo:
bartentero
Lo mismo puede hacerse con el resto de entrañables personajes de Los Simpson, pero no es fácil. Para retratar a Bart hacen falta 596 líneas de código, 583 para Homer, 997 para Marge, 725 para Lisa y 652 para Maggie, la pequeña de la familia amarilla que mejor representa a la clase media norteamericana.
El geek que se ha tomado la molestia de escribir tanto es Christopher Pattle, un desarrollador web afincado en Reino Unido que solo busca explorar sus propios límites y los del lenguaje CSS, aquel que se utiliza para dar formato y estilo (colores, tipografías…) a los elementos de una página web.
Para explicarlo brevemente y de forma muy sencilla, vamos a utilizar como ejemplo la propia Yorokobu. Olvidémonos de la programación, de lo que la web hace o es capaz de hacer. Fijémonos solamente en el aspecto externo. El look de esta web, como el de casi todas las demás, depende de lo que unos señores hayan escrito utilizando los lenguajes HTML y CSS.
El HTML es el chasis, los elementos desnudos: titulares, párrafos, imágenes… En el código fuente, se ven como etiquetas. Cosas como <h1>, <h2> o <h3> para los titulares (headlines), <p> para los párrafos o <img> para las fotografías, los iconos y los fondos. Pero así, de primeras, nadie ha dicho dónde tienen que ir o cómo tienen que lucir. Eso se hace en la hoja de estilos, Cascade Style Sheet, CSS por sus siglas en inglés.
Ahí es donde el navegador consulta cómo tiene que mostrar cada elemento del HTML: los titulares tienen que ser negros y grandes, las imágenes un 50% más anchas que los párrafos, el logo de Yorokobu tiene que mantenerse siempre arriba junto con el menú y los botones sociales… Cosas de ese tipo.
Lo que sucede es que CSS ha evolucionado mucho en los últimos años y ya se puede utilizar también para tirar líneas, dibujar círculos y rectángulos y, en general, trazar formas geométricas de todo tipo. Por eso está reemplazando en muchos escenarios a los jotapegés, los gifs y los penegés de toda la vida. Respecto a las imágenes, que son estáticas, no le faltan ventajas. Una especialmente importante: es muy fácil alterar el código para cambiar colores, tamaños, formas o cualquier otro detalle del aspecto de una página o aplicación web.
Por supuesto, lo que ha hecho Pattle con Los Simpsons es demasiado complejo como para resultar práctico, pero demuestra lo lejos que se puede llegar con CSS. Los dibujos animados son perfectos para este tipo de experimento porque se pueden descomponer en formas geométricas. Aquí tienes a Homer reducido a círculos, rectángulos y líneas:
formas
Lo que hace Pattel es describir cada pieza del puzzle por medio de etiquetas HTML organizadas de forma intuitiva: por ejemplo, cada elemento del pelo (clases hair 1, hair 2, hair 3) forma parte de la cabeza (clase head). Después define en el CSS qué forma tienen, qué tamaño, qué color y qué bordes presentan esos pedacitos de Homer.
Lo vais a entender perfectamente con el célebre bigote de Ned Flanders. Primero indica dónde tiene que verse: a 81 píxeles del borde superior de la cabeza y a 13 píxeles del borde izquierdo.
display: block;
position: absolute;
top: 81px;
left: 13px;
Después especifica cuánto tiene que medir: 50 píxeles de ancho y 18 de alto.
width: 50px;
height: 18px;
El color de fondo, por supuesto, ha de ser el característico marrón del mostacho.
background: #986a38;
Rodeado por un borde negro, de 1 píxel de grosor.
border: 1px solid #110b00;
Y, por último, la forma (que es lo más complejo).
-webkit-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
-moz-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
Ya está: ahí tienes el bigote del vecinillo de Los Simpson.
bigote
¡Pero solo el bigote! Piensa que la hoja de estilos del retrato de Flanders tiene 680 líneas de código. Una auténtica barbaridad de curro, puesto a disposición de cualquiera en GitHub por Christopher Pattle que, si al principio te parecía un tipo con mucho tiempo libre, ahora te parecerá un friki casi enfermo. Como el autor de este artículo, que se emociona con cosas como esta…

Esto que parece código informático – y que lo es – también forma parte de un retrato de Bart Simpson:
pelo
 
Es su puntiaguda cabellera, escrita en HTML como si fuera una página web. Le falta, por supuesto, un poco de estilo. Algo como esto:
codigo2
 
Y así podríamos seguir, picando código, hasta dibujar su cabeza al completo:
bartentero
Lo mismo puede hacerse con el resto de entrañables personajes de Los Simpson, pero no es fácil. Para retratar a Bart hacen falta 596 líneas de código, 583 para Homer, 997 para Marge, 725 para Lisa y 652 para Maggie, la pequeña de la familia amarilla que mejor representa a la clase media norteamericana.
El geek que se ha tomado la molestia de escribir tanto es Christopher Pattle, un desarrollador web afincado en Reino Unido que solo busca explorar sus propios límites y los del lenguaje CSS, aquel que se utiliza para dar formato y estilo (colores, tipografías…) a los elementos de una página web.
Para explicarlo brevemente y de forma muy sencilla, vamos a utilizar como ejemplo la propia Yorokobu. Olvidémonos de la programación, de lo que la web hace o es capaz de hacer. Fijémonos solamente en el aspecto externo. El look de esta web, como el de casi todas las demás, depende de lo que unos señores hayan escrito utilizando los lenguajes HTML y CSS.
El HTML es el chasis, los elementos desnudos: titulares, párrafos, imágenes… En el código fuente, se ven como etiquetas. Cosas como <h1>, <h2> o <h3> para los titulares (headlines), <p> para los párrafos o <img> para las fotografías, los iconos y los fondos. Pero así, de primeras, nadie ha dicho dónde tienen que ir o cómo tienen que lucir. Eso se hace en la hoja de estilos, Cascade Style Sheet, CSS por sus siglas en inglés.
Ahí es donde el navegador consulta cómo tiene que mostrar cada elemento del HTML: los titulares tienen que ser negros y grandes, las imágenes un 50% más anchas que los párrafos, el logo de Yorokobu tiene que mantenerse siempre arriba junto con el menú y los botones sociales… Cosas de ese tipo.
Lo que sucede es que CSS ha evolucionado mucho en los últimos años y ya se puede utilizar también para tirar líneas, dibujar círculos y rectángulos y, en general, trazar formas geométricas de todo tipo. Por eso está reemplazando en muchos escenarios a los jotapegés, los gifs y los penegés de toda la vida. Respecto a las imágenes, que son estáticas, no le faltan ventajas. Una especialmente importante: es muy fácil alterar el código para cambiar colores, tamaños, formas o cualquier otro detalle del aspecto de una página o aplicación web.
Por supuesto, lo que ha hecho Pattle con Los Simpsons es demasiado complejo como para resultar práctico, pero demuestra lo lejos que se puede llegar con CSS. Los dibujos animados son perfectos para este tipo de experimento porque se pueden descomponer en formas geométricas. Aquí tienes a Homer reducido a círculos, rectángulos y líneas:
formas
Lo que hace Pattel es describir cada pieza del puzzle por medio de etiquetas HTML organizadas de forma intuitiva: por ejemplo, cada elemento del pelo (clases hair 1, hair 2, hair 3) forma parte de la cabeza (clase head). Después define en el CSS qué forma tienen, qué tamaño, qué color y qué bordes presentan esos pedacitos de Homer.
Lo vais a entender perfectamente con el célebre bigote de Ned Flanders. Primero indica dónde tiene que verse: a 81 píxeles del borde superior de la cabeza y a 13 píxeles del borde izquierdo.
display: block;
position: absolute;
top: 81px;
left: 13px;
Después especifica cuánto tiene que medir: 50 píxeles de ancho y 18 de alto.
width: 50px;
height: 18px;
El color de fondo, por supuesto, ha de ser el característico marrón del mostacho.
background: #986a38;
Rodeado por un borde negro, de 1 píxel de grosor.
border: 1px solid #110b00;
Y, por último, la forma (que es lo más complejo).
-webkit-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
-moz-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
Ya está: ahí tienes el bigote del vecinillo de Los Simpson.
bigote
¡Pero solo el bigote! Piensa que la hoja de estilos del retrato de Flanders tiene 680 líneas de código. Una auténtica barbaridad de curro, puesto a disposición de cualquiera en GitHub por Christopher Pattle que, si al principio te parecía un tipo con mucho tiempo libre, ahora te parecerá un friki casi enfermo. Como el autor de este artículo, que se emociona con cosas como esta…

Compártelo twitter facebook whatsapp
Emiliano Granado retrata el lado antropológico del Tour de Francia
Bolsas de plástico que conciencian sobre el consumismo en las playas de Río de Janeiro
"Tú compras una camiseta y yo dejo de ser homeless ¡Guau!"
Sensible Software: vida y milagros del videojuego ‘brit’
 
Especiales
 
facebook twitter whatsapp
Opiniones 12
  • Muy interesante. Pero un curro de narices.
    Pregunto: ¿Y no es más practico usar Canvas de Javascript para eso? Tiene todas las ventajas que comentas «cambio de color, de posición, etc».
    Muchas de las líneas de código se triplican al aplicarle el -webkit-, el -moz- y el -ms-. Yo estoy empezando y me interesa bastante el tema, por eso pregunto si no sería mejor opción usar Canvas.
    Un saludo.

    • La cosa es demostrar que con CSS y CSS3 se pueden crear no sólo botones y estilos para webs.
      Está claro que ocupan líneas de más las nomenglaturas para diferentes navegadores, pero para eso existe un jquery que con poner la norma te lo aplica a todos los tipos de navegadores.
      Es un curro muy laborioso, y sobre todo debes estar muy concentrado para no liarte, ya que buscar un error en 1000 líneas no es facil…
      Saludos

    • ¿Plagio? Has leído el artículo? «El geek que se ha tomado la molestia de escribir tanto es Christopher Pattle, un desarrollador web afincado en Reino Unido que solo busca explorar sus propios límites y los del lenguaje CSS, aquel que se utiliza para dar formato y estilo (colores, tipografías…) a los elementos de una página web». Está atribuido a Pattle con link a su trabajo…

  • Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    El rollo legal de las cookies

    La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros (ni de cuartos ni de quintos) con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tenemos una política de cookies majísima y bla bla bla. Si continúas navegando, asumimos que aceptas y que todo guay. Si no te parece bien, huye y vuelve por donde has venido, que nadie te obliga a entrar aquí. Pincha este enlace para conocer los detalles. Tranquilo, este mensaje solo sale una vez. Esperamos.

    ACEPTAR
    Aviso de cookies