Infografía animada

Hasta ahora todos los ejemplos que hemos visto de infografías son estáticas. Presentan la información sobre una superficie, ya sea papel, fotografía o el monitor del ordenador.Hoy os presentamos un ejemplo de infografía dinámica en la que vamos a ver animación, efectos, sonido y con un discurso narrativo lineal.

(Fuente: Daniel Moisés Veiga)

En este caso leemos en los comentarios del autor en Youtube que esta infografía ha sido creada con la suite de programas de Adobe (Fireworks, Flash y Premiere). En nuestro curso, la herramienta más cercana podría ser Moovly, que combinada con GIMP, o Inkscape, permite realizar producciones parecidas.

PIXLR: Insertar una imagen en otra

En esta entrada os presentamos un truco con una herramienta muy sencilla, gratuita y online llamada Pixlr. En este truco vamos a incorporar y acomodar una imagen (tarjeta) sobre una base (Mano con tarjeta en blanco). El fichero al que hemos llamado base ha sido tomado de la página Morguefile y la imagen de la tarjeta ha sido creada con una plantilla de Canva.
Éstas son las imágenes que hemos utilizado, puedes descargarlas haciendo click sobre ellas.

En el siguiente vídeo podéis ver los pasos:

Curiosidad. ¿Cómo obtener colores fuera del ordenador?

Cuenta la leyenda, que Fátima, hija del profeta Mahoma estaba pálida en ocasión de su boda, al encontrala muy pálida, su padre le dijo: "Sal y toma la primea planta que encuentres. Aplástala sobre tus manos y pies". Ella descubrió así la henna, que desde entonces se convirtió en señal de alegría y bendición.

Hoy en día es muy sencillo "crear" un color en nuestro ordenador, podemos usar millones de colores, aplicar transparencias, capas y más capas de color. Sin embargo, no siempre fue tan fácil. ¿De dónde podían los seres humanos antiguos obtener los tonos para sus realizaciones?

A lo largo de los artículos anteriores hemos mostrado el significado de los colores, cómo combinan bien entre ellos, o mal. Hoy os presentamos de forma resumida el origen o cómo podemos obtener estos colores de la naturaleza.

Para gustos... los colores

Brillo, saturación, colores primarios, secundarios, análogos, triadas...
Sabemos que para muchos de nosotros elegir una paleta puede ser complicado, así que hemos escogido unas gamas cromáticas del libro "Tipografía para diseñadores, 850 tipos de letra y 40 gamas cromáticas" de Timothy Samara (Ed. Blume 2008). Esperamos os gusten las propuestas, aunque como todos sabéis para gustos, los colores y desde luego éstas no son las únicas posibilidades.

Gama cromática dirigida a un público infantil

Los colores para niños de entre cuatro y diez años son directos, transmiten energía, movimiento, exploración e independencia con respecto a los adultos. He aquí la propuesta:

Los colores de la seriedad y elegancia

Se caracteriza por paletas desaturadas, con colores más complejos. A medida que se hacen más neutros parecen más misteriosos y también ofrecen sofisticación.

Gama cromática de estilo activo, deportivo

Espíritu  fresco, dinámico que dé sensación de fuerza, salud, audacia. Dominan los tonos intensos del mar y los naranjas y verdes.

Gama cromática de la naturaleza, lo orgánico
La madera, la vegetación, la tierra y sus tonos transmiten sensación de naturaleza, elementos orgánicos.

¡Os sacamos los colores!

Sabemos más de sentimientos que de colores, por eso, un mismo color puede despertar distintas emociones, en ocasiones contrapuestas. Hoy os sacamos los colores y ese rojo de las mejillas puede significar “pasión”, “vergüenza”...

Fuente Wikipedia: Ilustración de la Teoría de los colores del poeta y científico alemánJohann Wolfgang von Goethe, 1809.

Ningún color carece de significado, éste es compartido por la sociedad, es un producto cultural. Por ejemplo, el blanco, símbolo de pureza en occidente, lo es de luto y duelo en China y Japón. Además, dicho lenguaje está teñido, matizado por las experiencias personales. Eso se desprende de la obra de Eva Heller, “Psicología del color" (editorial Gustavo Gili, 2004). Cuando queremos comunicar visualmente, tenemos que conocer ese lenguaje y adaptarlo al público al que se dirige o al tono que queremos transmitir con nuestro gráfico. Hoy os ofrecemos unas pequeñas pinceladas sobre los colores primarios.

Azul, el color preferido

El color de la lejanía, la fidelidad, serenidad y la inmensidad (debido al mar y al cielo). En la cultura cristiana, el celeste se identifica con la divinidad. Heller recoge en su estudio que es el color que más personas señalan como favorito. Combina bien con el amarillo, gamas de verdes, marrones, blanco...

Al principio fue el rojo

Fue el primer color en recibir nombre. Se cree que en casi todas las culturas las primeras palabras que existieron denominaban al día y la noche, y en seguida la experiencia de la sangre y el fuego dieron nombre al rojo.
El color de las pasiones y emociones intensas transmite calidez y energía. Representa el amor, la furia, el descontento y la alegría. Su simbolismo hizo que abanderara movimientos revolucionarios y domine en publicidad. Funciona bien solo, combina con el negro, el blanco, el verde y el gris.

El amarillo, el color de la contradicción

En él conviven sentimientos contradictorios, con valores positivos como la luz, el entendimiento, el optimismo y la alegría. Pero también, la envidia, los celos, la inseguridad, la avaricia y se identifica con animales venenosos. Combina bien con el azul, y con tonos anaranjados o rojizos; es la gama del atardecer.

Fuentes de información:
"Psicología del color", Eva Heller (editorial GG, 2004)
Silocreativo.com. Verónica Valenzuela

Ya estamos todos!!!

Al final habéis entregado la primera de las tareas,  67 alumnos/as de los 75 que empezamos el curso. No está nada mal! En esta tarea de presentación se os solicitaban datos como el centro, la etapa, etc. Los hemos ido recopilando en una hoja de cálculo y os los queremos presentar a modo de infografía. Disponemos también de otros datos como el sexo o qué día realizasteis la tarea.

Primero os ofrecemos los datos en bruto. Datos

Ahora una infografía con los datos aún más en bruto

y una más con los datos más limpios

13 razones

¿Por qué realizar o utilizar una infografía en clase?

En el  siguiente enlace nos presentan, mediante una infografía interactiva, trece razones por las que usar o comunicar mediante infografías. Va desgranando elementos como el porcentaje de cerebro que está involucrado en el análisis de la información, la cantidad de información que queda fijada en la memoria, la velocidad de transmisión, etc

http://neomam.com/interactive/13reasons/

Sin duda, las trece razones son poderosas, desde el papel de consumidor de infografías, pero añadiría una más, en este caso como creador y es la potencia que tienen como organizador del conocimiento propio. si les pedimos a nuestros alumnos que realicen sus propias infografías conseguiremos que sus conocimientos se asienten, sean más críticos, en definitiva, más competentes.

Music timeline

Music Timeline: Google  nos regala esta fantástica infografía interactiva en la que se muestra por fechas, estilos el porcentaje de música por popularidad. Merece la pena darse un paseo, buscar por artista, pulsar en un género para ver los subgéneros. La mayor pega es que sólo muestra la música disponible en su catálogo Google Play Music.

¿Te animas a compartir cuál era la música que sonaba el año en que naciste?

Como ejemplo, en 1975, Aerosmith publicó el disco Toys in the Attic o Queen publicó su obra maestra A night at the opera. 

Os lo ponemos fácil... Os pasamos las tipografías más bonitas

Sabemos que la infografía abarca una gran número de aspectos: búsqueda y selección de la información, creación de la paleta de colores, formato y selección de la tipografía. Esta decisión es muy importante ya que exige un doble compromiso: su presencia gráfica es un medio más de dar forma visual a una idea, de despertar sensaciones al lector…, y por otro, de cumplir las necesidades de legibilidad.

La tipografía puede producir sensaciones neutras o despertar pasiones, puede simbolizar movimientos artísticos, políticos, filosóficos... Los tipos claros y legibles que fluyen fácilmente son apropiados para grandes bloques de textos. Las tipografías más espectaculares, llamativas o personales, para titulares o pequeños bloques.

La tipografía es un arte en evolución, que hunde sus raíces en épocas históricas lejanas.

Aquí os proporcionamos unos enlaces en los que podéis ver, descargar y usar, algunas de las tipografías más bonitas de la red.

Las mejores 100 tipografías gratuitas de 2014

26 fantásticas tipografías que necesitas en tu vida

Fuentes gratis, los mejores de este año 2012

¿Habías pensado alguna vez que las tipografías pueden identificarse con revoluciones o cambios culturales?

Cartel de los Sex Pistols

Os presentamos un cartel del grupo Punk “Sex Pistols”. Si actualmente, preparáramos un diseño con un tratamiento similar, en cuanto a tipografías, inmediatamente lo identificaríamos con corrientes o movimientos de contracultura, anti-sistema.  

Fuentes: Fundamentos del diseño creativo, Gavin Ambrose-Paul Harris. Ed. Parramón. 2004

Awwwards

BuzzFedd Community

MundoDiseño

...y una más (fotoinfografía)

En la entrada de hoy os presentado el blog de Nicolás y Pana Cortés, no tengo más información sobre sus nombres, pero me parece importante porque en su blog van recogiendo tendencias en el mundo de la infografía.
Entre los infografistas a los que siguen está Gavi Valladares @Gapipapusa, que se dedica a la fotografía y cómo no, mezclando ambas facetas os traemos una fotoinfografía.

En dicha fotoinfografía se ha dedicado desde las 6:10 de la mañana hasta las 18:50 horas a tomar una foto cada 20 minutos, montándolas en la siguiente secuencia. Tal vez si nos hubiera añadido la información en cada fotograma hubiera mejorado la legibilidad de la misma.

Acortar direcciones y generar códigos QR

Acortar direcciones (URL´s)

A veces cuando queremos citar alguna fuente que hemos utilizado en nuestras infografías nos encontramos con unas direcciones web (URL´s) muy largas y poco estéticas o que no nos caben en el espacio que habíamos destinado a las mismas.
Algo como:

http://ticsyformacion.com/2014/10/31/los-5-virus-informaticos-mas-espeluznantes-infografia-infographic/

Existen varias herramientas online para crear cadenas más cortas, son las denominadas url shortener. Entre ellas disponemos de un servicio en Google asociado a nuestra cuenta, al que podemos acceder desde:  https://goo.gl/ 

Nos aparece una caja de texto con la etiqueta: "Paste your long URL here: (Pega tu URL larga aquí)", pegamos ahí la URL y pulsamos el botón Shorten URL. En la parte derecha de la ventana nos dará una nueva dirección como: http://goo.gl/s6USSg y nos mostrará una imagen de la página a la que enlaza.

Por ejemplo, en la Tarea 02. se os pide que compartáis una infografía y que citéis de dónde la habéis tomado. En algunos casos, las direcciones eran muy largas y se extendían más de una línea. Una solución es usar este tipo de herramientas.

Generar códigos QR

Cuando editamos materiales susceptibles de ser impresos podemos generar códigos QR para evitar que los usuarios deban introducir de forma manual la dirección donde está alojada la imagen. En internet existen varias herramientas para generar estos códigos, nosotros os mostramos ésta: 

http://www.codigos-qr.com/generador-de-codigos-qr/

Los pasos a seguir son:

• URL: pegamos la dirección sobre la que queremos generar el código QR.
• Tamaño: escogemos qué tamaño queremos usar en nuestro medio impreso
• Redundancia: escogemos el nivel de redundancia de elementos, a más redundancia más se facilita la lectura a los dispositivos, pero el código es más complicado estéticamente.
• Tras generar el código nos lo presenta como imagen para poder descargarlo o como elemento para ser embebido en una página web.

Y el resultado es una imagen como:

Comparaciones para entender la realidad

El cerebro humano no esta preparado para entender grandes números... Cuando ejercemos de "infografistas" necesitamos traducir las cifras a realidades próximas a nuestra audiencia para elaborar comparaciones que les ayuden a visualizar el verdadero valor que se esconde.  Hoy os invito a ver dos  geniales ejemplos, uno de ellos "made in Pamplona",  se trata de un vídeo extraído del Blog "Ciencia en el Bar" sobre el sistema solar y su escala. El otro, un cuidado libro infantil cuajado de comparaciones "El asombroso libro de las comparaciones", Russell Ash 1997.

Vídeo Sistema solar en el Encierro de Pamplona

Fuente: Ciencia en el bar

El asombroso libro de las comparaciones, Russell Ash, 1997

Distintos caminos de visualización

Infografía, Visualizacion de datos, “Data Art”... 

Son términos habituales en la red, ¿pero se refieren a la misma realidad? Si bien, en todas se pueden lograr materiales atractivos y artísticos, el propósito inicial no es el mismo.

A grandes rasgos la infografía y la visualización de datos comparten el principio de transmitir información, pero mientras en la primera el objetivo es atraer/entretener al lector contando una historia con un diseño cuidado; en las visualizaciones de datos se ofrece al lector una herramienta para analizar/explorar información que de otro modo sería tediosa o complicada de comparar. En ambos casos, palabras, imágenes, ilustraciones son los ingredientes para crearlas.  “Data Art” traspasa las fronteras, los grandes datos, se convierten en el material  con el que crear composiciones poéticas, armoniosas; pero muchas veces difíciles de analizar e interacturar. Serían como el óleo con el que pintar un cuadro;

¿Y tú qué tipo de infografía prefieres?

Ejemplo de infografía estilizante

National Geographic. Juan Velasco

http://www.charlesapple.com/2011/04/national-geographics-juan-velasco-on-infographics/

Ejemplo de infografía analítica o Visualización de datos

David McCandless

http://www.informationisbeautiful.net/play/snake-oil-supplements/

TED Talk http://www.ted.com/playlists/56/making_sense_of_too_much_data

Ejemplo de Data Art

http://www.customerintelligence360.com/5-absolutely-stunning-big-data-visualizations/

¿Cómo buscar el origen de una imagen?

Una de los problemas que nos encontramos a la hora de editar materiales es encontrar cuál es el origen de una imagen y saber qué tipo de permisos tiene para poder compartirla o usarla en nuestras clases. En la actividad 2, uno de los compañeros del curso pegó la dirección de la infografía pero no de dónde procedía, así que le preparamos un vídeo ilustrativo.

Los pasos que seguimos para hacer la búsqueda los podemos resumir en:

• Si no disponemos del archivo, como es el caso porque nos la han pegado en un Slide de Google Drive, capturamos la pantalla con la tecla ImprPant de nuestro teclado
• Abrimos MsPaint y la pegamos
• Con la herramienta de Selección hacemos un recuadro alrededor de la imagen que queremos buscar.
• En Edición pulsamos Copiar o "Control + C"
• En  Archivo pulsamos Nuevo o "Control + N"
• En Edición pulsamos Pegar o "Control + V"
• En Archivo pulsamos Guardar o "Control + G" y le ponemos un nombre representativo.
• Abrimos www.google.com en nuestro navegador.
• Pulsamos en imágenes
• Pulsamos el icono de Cámara de fotos
• Seleccionamos Subir una imagen -> Seleccionar Archivo
• Y ya está! o lo que es lo mismo, vemos el vídeo que lo muestra paso a paso y tardamos menos que en leer todos estos pasos (*) No hay voz, sólo una música agradable.

Aviso navegantes!!!

Han pasado ya varios días desde que comenzamos el curso. Es necesario que realicéis la primera actividad antes del 17 de noviembre porque si no, seréis expulsados del curso y vuestra plaza se pondrá a disposición de aquellos alumnos que se quedaron en reserva.

Las fuentes de la inspiración

Imágenes extraídas de: La Buena Prensa

"La inspiración existe, pero tiene que encontrarte trabajando", Picasso. 
Hemos pensado comenzar la entrada de hoy con esta reflexión del genial pintor malagueño. Comunicar visualmente, de forma efectiva, atractiva y original para tus alumnos puede ser un trabajo "duro". Se necesitan altas dosis de creatividad y en ese proceso, muchas veces nos preguntámos ¿cómo?, ¿seré un fraude?, ¿merecerá la pena? Hoy hemos querido mostraros con la imagen que acompaña a este artículo, cómo fue la rutina de trabajo en el diario valenciano "Las Provincias". Esta página la hemos extraído de una entrada del Blog La Buena Prensa, del profesor de Edición de Diarios y de Proyectos Periodísticos en la Universidad de Navarra, Miguel Ángel Jimeno (Una maqueta y... su historia).
En ella veréis los ingredientes empleados para cocinar una espectacular infografía: grandes dosis de humor + trabajo en equipo + uso diferente de productos/bienes corrientes.
¿Y tú de dónde extraes ideas creativas para tus clases?

Print vs Web

En la siguiente infografía se muestra la diferencia entre los formatos de imagen para Web o para ser impresos. Es importante optimizar las características de las imágenes antes de subirlas a la web para facilitar el tráfico.

Fuente: http://goo.gl/p3K92P

Una de las herramientas online que podemos utilizar es http://www.webresizer.com/ .
Una imagen tomada con el teléfono móvil o una cámara digital puede "pesar" varios megas. Con esta herramienta podemos ajustar al tamaño adecuado para ser compartida. En el siguiente ejemplo os mostramos cómo una imagen tomada que "pesa" 1.96Mb pasa 168KB, un 91% menor.

Fuente: Otoño en el Parque de la Runa (Josi Ayensa)

Imagen optimizada y con un peso mucho menor.

Fotoinfografía

Una de las tipologías que más me gustan son las Fotoinfografías. Durante el curso podéis ver ejemplos de Peter Orntoft, o la parte cómica de la introducción del curso de Ursus Wehrli. Hoy os traigo el trabajo de un infografista-fotógrafo llamado Thom Atkinson quien ha realizado una serie de fotografías a cerca de cómo ha sido el kit de los soldados británicos desde 1066 al 2014.

Podéis ver la galería completa en: http://goo.gl/l2Ll2F

Parafraseando al gran Quino, con su inmortal Mafalda: "¡Cuánto ha evolucionado el hombre y qué poco sus intenciones!"

En una de las primeras prácticas deberéis realizar una fotoinfografía al estilo de Werhli, Orntoft o Atkinson. ¿Conoces alguna fotoinfografía?

Infografía: Cómo aprendemos

A modo de reflexión os dejo una infografía de Alfredo Vela(@alfreodvela) acerca de cómo se adquiere el conocimiento: Mezcla la visión de dos autores: William Glasser y Benjamin Bloom, del cuál vimos su Taxonomía de Bloom en la sección 1. Introducción. 
Es una infografía sencilla, con poco contenido gráfico, por ejemplo, podría haber aprovechado los diferentes modelos que hay sobre la Taxonomía de Bloom, y mostrarlo de una forma más visual. Pero aún así, cumple su cometido.

Fuente: http://infografiasencastellano.com/2014/05/04/como-aprendemos-infografia-infographic-education-2/

William Glasser expone que aprendemos el 70% de lo que discutimos con otras personas. Así que te animamos a participar en este debate. ¿Puedes aportar algún modelo de aprendizaje más? ¿Están bien explicados? ¿Puedes aplicar su contenido de forma práctica en el aula o sólo es una suposición teórica?

Bienvenidos al curso Infografía: Aprender cono la imagen

Buenos días!!!

Somos TutorInfografia1 (Elena Armendáriz) y TutorInfografía2 (Josi Ayensa) y os damos la bienvenida al curso "Infografía: aprender con la imagen".

Abrimos este blog como herramienta para compartir los trabajos que vayamos haciendo a lo largo del curso, de forma que podáis comentar los trabajos de vuestros compañeros y que se valoren también los vuestros.

Desde este blog os facilitaremos enlaces a aportaciones de última hora, cambios en alguna de las herramientas o enlaces a páginas interesantes que hayamos podido descubrir a lo largo del curso.

No queremos desvelar muchos detalles de cómo va a funcionar el curso, pero lo que sí que os podemos avanzar es que vais-vamos a trabajar mucho.