Presentaciones interactivas educativas para Ecoembes

Portada de un recurso didáctico de Naturaliza, proyecto educativo de Ecoembes.

Proyecto Naturaliza: medio ambiente en las aulas.
Recursos didácticos en castellano e inglés.
Primero a sexto de primaria.
Naturaliza, Ecoembes
Agosto – noviembre de 2018
Prodigioso Volcán

Realización de recursos didácticos interactivos en Microsoft Power Point y LibreOffice para Naturaliza.
Naturaliza es un proyecto educativo con una mirada ambiental.

– Elaboración de guiones gráficos (storyboards).
– Creación de personajes.
– Creación de recursos didácticos e infografías.
– Elaboración de presentación.
– Animación y sonido.
– Traducción al inglés.
– Conversión a LibreOffice.

El personaje Luis Pinceles.
El personaje Luis Pinceles.
Guión gráfico de un recurso didáctico. Secuencia de imágenes e ilustraciones que hacen de guía al argumento de la unidad didáctica.
Guión gráfico de un recurso didáctico. Secuencia de imágenes e ilustraciones que hacen de guía al argumento de la unidad didáctica.
Recurso didáctico realizado en Power Point 16.16.3.
Recurso didáctico realizado en Power Point 16.16.3.
Diapositiva que incluye ilustración, links a vídeos y audios.
Diapositiva que incluye ilustración, links a vídeos y audios.
Mismo recurso didáctico que el anterior, convertido a formato LibreOffice 6.1.2.1.
Mismo recurso didáctico que el anterior, convertido a formato LibreOffice 6.1.2.1.

En las conversiones de PPTX a ODP las presentaciones encontramos problemas con los audios, los anclas internos de los menús, los enlaces a vídeos externos y en la conversión de animaciones y transiciones.

Juegos para ordenar secuencias de imágenes.
Juegos para ordenar secuencias de imágenes.
Ejercicios de preguntas y respuestas para alumnas de Primero a Sexto de Primaria.
Ejercicios de preguntas y respuestas para alumnas de Primero a Sexto de Primaria.
Paleta de color utilizada en el proyecto Naturaliza.
Paleta de color utilizada en el proyecto Naturaliza.
Infografía estática que explica cómo hacer un comecocos de papel.
Infografía estática que explica cómo hacer un comecocos de papel.

Ecoembes es una organización medioambiental que fomenta la economía circular a través del reciclaje de envases de plástico, las latas y los briks (contenedor amarillo) y los envases de cartón y papel (contenedor azul) en toda España.

Sesión Bajo el Volcán: Vida audiovisual de los gráficos

Sesión en Prodigioso Volcán sobre el resurgir de los gráficos en el medio audiovisual. Mario Tascón, Rafa Höhr, Juantxo Cruz

Sesión Bajo el Volcán
Viernes 23 de febrero de 2018
Usos más innovadores de gráficos en el audiovisual y reflexionaremos sobre cómo las marcas pueden aprovechar estos recursos en sus estrategias de comunicación y marketing.

La nueva vida audiovisual de los gráficos
La nueva vida audiovisual de los gráficos

Rodrigo Fuentes diseñó el cartel; el éxito de la convocatoria para la sesión Bajo el Volcán fue rotundo. En tan sólo dos días se completó el aforo.

Error en un gráfico de tarta que apoya el mensaje de Obama.
Error en un gráfico de tarta que apoya el mensaje de Obama.

Los gráficos de noticias evolucionan de manera imparable. Cada día podemos ver trabajos más y más espectaculares, tanto impresos como digitales. Sin embargo, la innovación en este tipo de recursos informativos está sucediendo en otro lugar: las pantallas de televisión. Gracias a la realidad aumentada, experiencias inmersivas, pantallas interactivas o escenarios virtuales, la visualización de datos está adquiriendo un papel fundamental (por no decir el protagonista) a la hora de contar una noticia.

Lo primero es saber que estás intentando decir. Con la gran cantidad de datos que podemos obtener hoy en día es fácil perderse y al final no contar nada. Debes ser selectivo con los datos para encontrar la mejor forma de comunicar tu idea.
Lo primero es saber que estás intentando decir. Con la gran cantidad de datos que podemos obtener hoy en día es fácil perderse y al final no contar nada. Debes ser selectivo con los datos para encontrar la mejor forma de comunicar tu idea.

La cita fue en el local de la Calle Escorial 17 de Madrid y duró en torno a una hora. Comida oriental y baos de de Toy Panda.
La sesión arrancó con una presentación de los formatos más novedosos desde el punto de vista de la manera en la que el conductor, presentador o periodista interactúa con la información. A continuación, se analizó de forma práctica cuáles son las diez experiencias necesarias para construir un gran gráfico.

Sesión Bajo el Volcán: gráficos y televisión
Sesión Bajo el Volcán: gráficos y televisión

Rafa Höhr ha sido director de Infografía de The Sunday Times, del grupo Joly; y responsable de infografía digital de El País. Ha obtenido a lo largo de su carrera los más prestigiosos galardones en infografía multimedia periodística, como el Peter Sullivan, equivalente al Pulitzer en esa disciplina.

Juantxo Cruz ha sido responsable del departamento de infografía de El Mundo durante más de diez años. Cuenta con una larga experiencia en gráficos y visualización de información y en la actualidad desarrolla proyectos de Big Data e información visual.

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.

GRAPHICS: Best2010, G20

Gracias por visitar el sitio de Juantxo Cruz

Pulsa aquí.

Videográfico sobre el G20.
Por David Alamenda.

‘La necesidad de sorprender al lector, usuario y espectador (el gráfico es cross-platform) fue una de las máximas de esté gráfico.
La pieza tiene un marcado caracter didáctico, acompañado de datos curiosos y definitorios sobre el G-20. Más allá del lenguaje impreso y de las animaciones interactivas, decidí adentrarme, con mucho respeto, en el lenguaje audiovisual: elaboración de un guión, animaciones, voz en off, nuevas herramientas, estética retro, pero con la clara intención de seguir informando’.

DIAGRAMS: SyynLabs y Rube Goldberg

SyYNLABS
Desde 2008.
Ingenieros creativos.
Los Angeles, California.
EEUU.

Gracias por visitar el sitio de Juantxo Cruz

Responsables del último vídeo de OK Go (banda de Los Ángeles).
This Too Shall Pass.
10 millones de visitas en 20 días.
Accidentes en cascada, ‘in crescendo’. Apoteósis final.

VIDEO AQUÍ

Basado en la idea de una MÁQUINA de RUBE GOLDBERG.
Aparato complejo para hacer algo simple.
Reuben Lucius Goldberg (1883-1970)
Caricaturista en el San Francisco Chronicle, New York Evening Journal e ingeniero.
Berkeley, EEUU

Gracias por visitar el sitio de Juantxo Cruz

Gracias por visitar el sitio de Juantxo Cruz

Gracias por visitar el sitio de Juantxo Cruz

Gracias por visitar el sitio de Juantxo Cruz

DIAGRAMAS de Goldberg.