viernes, 4 de octubre de 2013

Universo Modesto


Diagrama realizado por Emilio Amade y el Departamento de Infografía de EL MUNDO.

A Fabulous Colleague

Ayer Modesto J. Carrasco (@modesjcc) pasó por Twitter estas dos geniales imágenes.
Son los comienzos del departamento de gráficos de EL MUNDO, en 1989.

Las tenía en papel fotográfico en su casa, les hizo una foto con el iPhone y en segundos corrían por la red. También ayer nos vimos y nos reímos mucho, entre otras cosas, recordando cuando teníamos que bajar a los talleres a pedir vez para usar un escáner. Perdías la mañana, seguro.
Fotografía digital de una foto impresa. Sí, Modesto siempre supo adaptarse a las nuevas tecnologías y estoy seguro de que tendremos buenas noticias suyas pronto.



Principios de los 90: Jeff Goertzen, Gorka Sampdro, Modesto, Ricardo Martínez, Mario Tascón, Jordi Clapers y Samuel Velasco. El tipo de abajo con la gorra era un currante de la obra de enfrente, en la sede de EL MUNDO en Sánchez Pacheco.


1990: Ricardo Martínez, Gorka Sampedro, Mario Tascón, Patxi Aguirre, Forges, Modesto, Ulises Culebro, Jeff Goertzen, Samuel Velasco, en Sánchez Pacheco.

Hace unos días intercambié impresiones con Jeff Goertzen, actualmente Director de Educación en la SND y consultor en Orange County Register - ¡aluncinen con estas láminas!- , y me dijo esto sobre Modesto: "What a tenure that man has given to El Mundo! If there were a guy that I truly enjoyed working with, it was him. He is one of the few remaining original gang that we were there during the Gulf War. He was a fabulous colleague.".


"Sí", le contesté. Era lo mismo que yo pensaba.
Ayer estuvimos celebrando con Modesto su larga carrera profesional en el diario, 23 años. Emilio Amade realizó un gráfico para la ocasión, le fue entregado enmarcado, que resumía la historia del departamento siguiendo sus pasos. Espero tenerlo pronto para publicarlo aquí. Una pasada.



lunes, 30 de septiembre de 2013

Diagramas para hace ruido

Hoy he repasado el email y he encontrado estas imágenes que hace ya tiempo envié a un buen amigo.
Diagramas de las conexiones de los pedales de guitarra.

El uso de infografía en la información diaria o en el marketing es mínimo en comparación con los usos que se le da en otros muchos campos: Allí son necesarios expertos en comunicación que sepan representar las cosas, buscar un orden, contextualizar. El mundo de la infografía no acaba entre las paredes de una redacción.

Aquí dos disposiciones para hacer mucho ruido.

Pedalera de Dave Grohl con los Foo Fighters, 2000.


























J. Mascis, Dinosaur jr, 1996




























Los diagramas los encontré en GuitarGeek.

lunes, 23 de septiembre de 2013

Levántate y lucha, esta es tu pelea




















2005: Elección del nuevo Papa.
2013: Cónclave papal.

Una muestra más de la experiencia directa:  'Show, Don't Tell'.
Estas fotografías se encuentran en un documento titulado 'The 4 Essentials of Every Great Website (And How to Design Yours)' y escrito por Meghan Lockwood.

Las cuatro máximas:
1. Esteticamente bello.
2. Optimizar para el usuario.
3. Personalizar y dar contexto.
4. Optimizar para móviles.

Más links: 'The Seven Years That Change Everything'. Smashing Magazine.

martes, 10 de septiembre de 2013

Pedro Pérez Cuadrado: "Tenemos ya mejores herramientas en casa que en el puesto de trabajo"



Hablamos con el Dr. Pedro Pérez Cuadrado, investigador y Profesor Titular de la Facultad de Comunicación de la Universidad Rey Juan Carlos de Madrid.

Lo pillo cuando faltan escasos días para inaugurar las V Jornadas de Diseño de la Información. Está a tope. Le agradezco su paciencia y rápida respuesta a este breve formulario de preguntas.




JC: Lo primero de todo Pedro, enhorabuena por este lustro de Jornadas. Yo estudié en la Universidad de Navarra y te puedo comentar que, como alumno, una de las cosas que más me influyeron fueron jornadas y sesiones como las que organizáis en la Universidad Rey Juan Carlos.

A lo largo de estos cinco años habéis tratado en profundidad campos como el diseño, la creatividad, la imagen y la fotografía, la infografía, el mundo de las revistas y los magazines, los periódicos impresos. Y de repente, aparece un mundo nuevo al que quizás muy pocos estaban preparados.

Estas quintas Jornadas se zambullen directamente en el mundo del diseño audiovisual. De alguna manera, ¿se abre un nuevo ciclo?

PPC: No se abre, ya está abierto. Y a muchos nos pilla a contrapié. Todo va muy rápido. Pero ya nos dimos cuenta en las primeras Jornadas. Entonces tuvimos un diseñador de postproducción audiovisual, un chaval de apenas 20 años, que nos hizo una exhibición de cómo se estaban gestionando digitalmente las series de televisión y de cómo el diseño, como disciplina transversal, abarcaba a cada una de las especialidades en comunicación.

Por eso ahora pretendemos, en esta nueva edición, considerar aspectos propios del audiovisual que se quedaban fuera en otros tipos de  diseño: fundamentalmente el sonido y el movimiento. >

JC: Me ha llamado la atención que en la presentación de las Jornadas en la página web se afirme: "Desgraciadamente, desde la Universidad no podemos presumir de estar a la vanguardia de las experimentaciones en Diseño de la Información." ¿Qué está pasando?

PPC: Lo que está pasando es general, no sólo de las universidades, que también. ¿Te has dado cuenta que la mayoría de quienes nos dedicamos a este mundo tenemos ya mejores herramientas en casa que en el puesto de trabajo? Son tan rápidos los cambios tecnológicos (hardware y software) que las empresas no pueden rentabilizar sus adquisiciones. Y la crisis ha venido a echar sal a la herida.

El que yo te diga que la equipación informática de nuestras universidades públicas no es la óptima o el que te descubra que no todos los profesores se reciclan como debieran no es un secreto de estado. Cierto es que en diseño de la información no es todo ordenador, pero si queremos colocar a nuestros alumnos en el mundo laboral real, digamos que sí es un tanto importante.



JC: Pienso que si existiese un modelo debería fusionar de alguna manera la formación tecnológica, con la formación periodísticas y con la formación creativa. ¿Qué modelos ves en vanguardia del Diseño de la Información?

PPC: No hay fórmulas mágicas. Ahora mismo todos (empresas, universidades, trabajadores...) estamos en un momento de ensayo-error que nos debe llevar a buscar modelos de negocio en el mundo de la comunicación y el diseño con patrones muy diferentes a los que se mantuvieron en el mundo analógico. Mi idea principal es que, en comunicación, el diseño no vende y la tecnología tampoco. Ayudan, y mucho, eso sí. Pero hay que volver la vista a los contenidos, que es lo que la gente consume y dejar de pasear la misma basura por tantos soportes.


JC: En la presentación también se habla de que "la aparición de tantos y tan variados soportes de la información (ordenador, papel, tabletas, móviles...) ha multiplicado las posibilidades de diseño que, en las premisas a las que constriñe el formato, el tamaño, no tienen otra salida que adaptarse a todos ellos".
¿Estamos hablando de un diseño periodístico sin formato?


PPC: Estamos hablando de diseño que sepa adaptarse a cada formato manteniendo las cualidades de legibilidad, impacto, equilibrio, economía... no vale el mismo diseño en grande para papel y reducido para tablet o móvil. Diseño es, fundamentalmente, valorar y jerarquizar y, como bien sabes, no es lo mismo hacerlo para un formato A3 que para pantallas de 6 pulgadas.


JC: Existe un reto tecnológico muy fuerte para los comunicadores visuales, sin embargo, sigo pensando que lo más importante es saber ser un buen periodista. Eso se aprende con la experiencia, pero desde la Universidad podéis dar un empujón muy importante. Además de las Jornadas, ¿existen programas académicos específicos sobre periodismo visual y/o periodismo de datos?

PPC: Lo del periodismo visual es un tanto incongruente: ¿no ha sido visual el Periodismo, con mayúsculas, desde siempre? Si te refieres a la infografía, como fórmula redaccional o como herramienta de comunicación, te diré que funciona con ciertos criterios extremadamente bien.

No siempre, porque no siempre se hace bien, como todo. La moda del 'big data' funcionará en tanto en cuanto se liberen las bases de datos, los accesos sean públicos y los periodistas seamos conscientes que no somos de letras y que los datos numéricos generan una fuente inagotable para contar historias que los lectores aprecien. En nuestra facultad, de hecho, hay una asignatura de 4º curso, optativa, que se denomina  Periodismo Infográfico y un máster especializado en Periodismo de datos que se imparte en colaboración con El Mundo.


JC:  El mundo de la comunicación periodística se está abriendo a muchos campos que antes eran difícil de imaginar, como el mundo de la empresa, la medicina, la ingeniería o incluso la publicidad. Ahora todo el mundo tiene una necesidad urgente de contar historias. ¿Pueden asistir a estas jornadas alumnos de otras carreras o personas ajenas al periodismo?

PPC: Pueden asistir sin problemas. Es más estamos orgullosos de poder captar cada año cada vez más cantidad de profesionales. Los alumnos de nuestra universidad ya lo saben, y nos llegan gente de Turismo, Económicas, Medio Ambiente, etc. A los de otras universidades les cuesta más pero las puertas están abiertas para todos.



Estaríamos hablando de diseño y comunicación con Pedro Pérez Cuadrado varias tardes. Le dejamos apretando las últimas tuercas. Los próximos días 17 y 18 de septiembre lo encontraréis en las V Jornadas de Diseño de la Información en la Universidad Rey Juan Carlos.

jueves, 27 de junio de 2013

El póster de la moda


En 2006, El Magazine de el Mundo del Siglo XXI publicó ocho láminas que completaban el mega poster sobre la Historia de la Moda. En total ocho dobles de formato A3, ó 16 páginas A4.

El archivo original está perdido. En aquel año pasamos todas la base de datos de gráficos a formato digital y en el baile de discos, memorias, servidores, disquetes, cds, floppy disk, jaz cartridge, iomega zip y demás artefactos de almacenamiento se perdieron tres preciosos meses de 2006, justo los que contenían los archivos originales de esta pieza.

Todos los gráficos de EL MUNDO fueron fichados por un equipo enorme de gentes que estuvieron un año pasando gráficos desde McDraw a Freehand y de Freehand a Illustrator en formatos EPS editable y PDF.

De ahí, pasaron a una base de datos privada, consultable a través de la web. Todo el archivo, desde 1989 hasta hoy. Una joya infográfica que ahora se aloja en la Avenida de San Luis. Fue un trabajo de chinos que yo mismo coordiné con el inapreciable apoyo de Jorge Fernández, que creyó en el proyecto desde el principio.

Ahora vuelvo al póster y veo con sorpresa que no existen imágenes en la web. Sirva este post para que quede constancia de aquel trabajo.



El póster de la moda. 2006. EL MUNDO.




Estos son los créditos:

Título:
El póster de la moda.



· Dirección de Arte:

Isabel González



· Infografistas:

Beatriz Santacruz

Carlos Martínez





Maite Vaquero


Chema Matía


Rafael Estrada


Bárbara M. Díez


Carlos S. Coelho


Emilio Amade


Modesto J. Carrasco


Mariano Zafra



· Fotografía:


José María Presas.


Kaulak.



· Documentación y textos:


Enrique Muñoz


Javier Munera

Diana Fernández (Centro Superior de Diseño de Moda de Madrid)


Daniel Izeddin



Fuentes:


Museos, Institutos:


(1): Centro Superior de Diseño de Moda de Madrid, Comunidad de Madrid.


(2): Museo del Traje, Centro de Investigación del Patrimonio Etnológico, Madrid, Comunidad de Madrid.


 (3): Centro de Información Textil y de la Confección (CITYC), Barcelona, Cataluña.


(4): Museo del Calzado de Elda, Comunidad Valenciana.


(5): Federación de Industrias del Calzado Español (FICE), Madrid, Comunidad de Madrid.



Libros:


(1): Historia de la moda. Desde Egipto hasta nuestros días, Bronwyn Cosgrave, Editorial Gustavo Gili, 2005.


 (2): Breve Historia Del Traje Y La Moda / Costume and Fashion. A Concise History. James Laver. Ediciones Cátedra, 1988.


(3): Uniformes Militares 1686-1918, René North, Editorial Bruguera, 1970.




The Fashion Poster won a Gold Award (Infographic Category) at the Society of News Desing 2007 contest.



Peinados y sombreros.

Complementos.

Ropa interior.

Trajes de hombre.

Trajes de mujer.

El bañador.

Zapatos.

Uniformes.



lunes, 17 de junio de 2013

Pan y gráficos


Una muestra de gráficos sobre el pan.
Viendo su evolución se puede aprender sobre visualización e infografía. 
Siento dejar esta entrada tan mal editada, pero es que Blogger me está dando problemas con algo que no acierto a corregir. Sorry.




Cómo se hace el pan
Ilustración en la tumba de Ramses II (1279-1213 a.C).





Precio del pan
1889-1890




















Diagrama de la composición del pan
Sobre 1910

Una semana de racionamiento en la Armada Alemana.
1914









Valores nutritivos del pan
Sobre 1910
US Department of Food Materials



Mapa del pan en Francia
Coté France on the Autoroute du Sud







Poster de 1917, Primera Guerra Mundial.



















USA Today Snapshot
Fecha desconocida
En la galería de Terrible Infographics






Bread Salt Chart



Clarín, Jaime Serra
2008






Panne
2009






Los ingredientes del pan de centeno danés
Sara Krugman and Momo Miyazak, estudiantes de Instituto de Diseño Interactivo de Copenhague.
2012

viernes, 14 de junio de 2013

The Denver Post, 1912

Tenía por alguna carpeta estos gráficos antiguos de The Denver Post sobre el Titanic. Los volvió a publicar, 100 años después de su impresión, Daniel J. Schneider en su blog del diario de Colorado. Daniel explica que este tipo de gráficos "hacen la inmensidad del Titanic más comprensible para el hombre común".
Increíble cobertura y seguimiento informativos.
Aquí los rescato.





Comparación del Titanic con la Torre de Daniels & Fisher de Denver.
Fotocomposición del 16 de abril de 1912.



Comparación de la fuerza de impacto del Titanic con el iceberg con su equivalencia en número de vagones de tren.
17 de abril de 1912.




Diagrama del Titanic.
18 de abril de 1912




Comparación del Titanic con otros barcos.
18 de abril de 1912.


Tipografía a mano

Esta semana me ha tocado bucear en el universo de la tipografía realizada a mano.  Detrás de muchas de ellas hay gigantes ilustradores. Un mundo sin límites. Lápiz, goma y papel. ¿Vintage? ¿Retro? Lo clásico siempre será moderno.
Estas son algunas muestras que me han dejado helado.



.


Manchester, UK
TYPEFACE Film poster N02


Karl Kwasny, NY, USA
The Devil I Know






Norwegina Wood Type





Crysp Creative, Chicago


Estocolmo, Suecia


Andrew Power, Nwefoundland, Canadá


Dinara Mirtalipova, Uzbekistán
Genial, gran talento.



El inimitable e inigualable Ralph Steadman.
Debéis ver este estupendo vídeo.
Algunos lugares para tomar aire:
· ABDUZEEDO Design


martes, 4 de junio de 2013

Animación 2D después de Flash



Las restricciones de algunos dispositivos móviles a la avanzadísima tecnología Flash (lenguaje ActionScript) ha supuesto una caída de los contenidos animados.

No ha sido así en el campo del vídeo, los juegos y las apps móviles, donde Flash todavía tiene mucho camino que recorrer.

Ayer, mi amigo y gran profesor Javier Mateo comentaba que en muchos sitios web ahora encontramos de nuevo el viejo y querido GIF animado, un formato que es soportado por todos los navegadores y dispositivos.

Actualmente se está produciendo una explosión de nuevos productos que permiten contar tus historias con movimiento y audio. Nos encontramos a mitad de camino entre el ‘boom’ de la animación en Flash y la nueva web móvil.

El principal obstáculo para su implantación siguen siendo los viejos navegadores, especialmente los fabricados por Microsoft.

Aquí repasamos algunas opciones para animar tus proyectos sin saber demasiado código. Son programas que ejecutan código CSS y el lenguaje Javascript o su librería más extendida: jQuery.



I. DE FLASH A HTML5


Pros: Herramienta de Google para convertir documentos Flash (swf) realizados con ActionScript 2 en contenido HTML5 no editable. Las conversiones de ActionScript 3 (en funcionamiento desde 2006) se encuentran hoy en fase experimental.
La conversión se realiza a través del navegador o cargando una extensión el el programa Flash.
Cons: Así suena my bonito, pero las conversiones no siempre son posibles.
Los documentos ‘SWF’ deben ser muy sencillos y pesar menos de un mega.



Adobe Wallaby: fla
Otra herramienta para convertir documentos Flash  (fla) en HTML; en teoría el resultado es editable y se ejecuta desde un programa instalado en el ordenador.
De momento, ambas herramientas son muy limitadas y están en proceso de desarrollo.

Convierten pequeños y simples documentos, pero no una aplicación.
La interactividad es muy difícil de convertir.




II. ANIMACIÓN EN  HTML5

Adobe Edge CC: Nueva versión el día 17

Crear contenido animado e interactivo para la web moderna.
El día 17 de junio sale la nueva versión: Animate CC.

Se acabó el tiempo de prueba, empieza el partido y la hora de pagar un precio: 499dólares por licencia o 15 dólares de suscripción mensual, en la web de Adobe.

Pros: Una gran herramienta de animación, pensada por Adobe para sustituir a Flash e integrarse perfectamente con proyectos HTML5. Su corazón está escrito con jQuery. Es el futuro de la animación 2D.

Cons: No corre en navegadores antiguos. No hay parche. La API de Animate no permite conversión a etiquetados antiguos.






Crear. Animar. HTML5.
Igualmente, pensado para tecnología HTML5, juega con su propia API de Javascript.
Su última verión cuesta 60 dólares, en su web o en la Mac AppStore.
Cons: Sólo para fieles del Mac y OX 10.6.6. No tienen pensado sacar versión para Windows.
Pros: Compatible con IE6+ si se respetan algunas opciones.




Pros: Software en línea de Adobe Edge e Hype, con línea del tiempo, escenas, fotogramas clave, efectos y posibilidad de programar con javascript.
Corre en navegadores modernos, smartphones, iPhone, iPad y Pcs.
Cons: No IE6+.
Precio: 120 euros.




Software para crear películas interactivas, juegos y aplicaciones utilizando el motor de Javascript. La última versión acaba de salir al mercado.
Pros: El nuevo paquete incluye versión para Windows y Mac OS X. (antes sólo Windows). Según su web, funciona en el 99% de los navegadores (IE6+) y en teléfonos inteligentes (smart phones).
La licencia cuesta 50 dólares a través de su web.




Animaciones móviles con CSS3.
Precio: 99 dólares.
Pros: Accesible en plataformas Windows, Mac OX y Linux.
Pensado para realizar pequeñas animaciones para móviles y juegos simples interactivos.
Cons: sólo para navegadores modernos.




Herramienta para crear contenido y audio web en Flash o HTML.
Pros: permite salida para HTML5 o para Flash y es compatible con iBooks Author.
Versión para Mac y Windows.
Precio: 109 euros por licencia.





Contar historias visualmente.
Cons: Herramienta pensada para contenidos del iPad y el iPhone, por tanto para plataformas nativas de iOS.
Están trabajando en una versión para Android.
19 dólares a través de la Mac App Store.




III. HERRAMIENTAS ONLINE


Página digital para crear y compartir dibujos realizados a mano realizada con Javascript y el canvas de HTML5.
Cons: Herramienta online extremadamente básica.
Pros: Divertida.




Pros: Creatividad en la nube, sin necesidad de descargar ningún programa.
Se trabaja desde el navegador y se guarda en la nube.
Los resultados se pueden exportar en formato javascript o CSS a  tu sitio local.
Accesible tras rellenar un formulario.

Cons: Necesita un reproductor de javascript para renderizar los trabajos.
Pensado especialmente para crear pequeñas publicidades para navegadores HTML5 y dispositivos móviles. Se recomienda visualizar los trabajos en Google Chrome.



Pros: sencillo software gratuito al que se accede a través de navegador.
Cons: Herramientas muy limitadas, pensado para pequeños trabajos, para navegadores que soporten tecnología HTML5. Recomiendan Firefox y Chrome.



Como Mixeek, herramienta para trabajar en el navegador.
Pensada especialmente para animar tipografía y logos.










Herramienta para crear pequeñas publicidades, animar tipografía o logos a través de tu navegador. Se exporta un archivo javascript y necesita un reproductor que se guarda en la carpeta de tu sitio local o remoto.
Los trabajos se guardan en tu perfil de gmail.com.

Pros: Salida javascript aceptable en todos los navegadores, incluido IE6. 
Cons: Pocas herramientas, limitaciones. Recuerda a la primera versión de Flash.
Gratis.




IV. PASARON A OTRA VIDA

Software que reune las cararterísticas de los anteriores, pero que ha dejado de desarrollarse.