Sie sind auf Seite 1von 20

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

1 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

Recicla tus competencias digitales en tan slo 3


meses
INFRMATE del curso online aqu

GIFs animados: Qu son,


cmo usarlos,
encontrarlos y
aplicaciones para crear
tus propios archivos
Qu es un GIF
l trmino GIF (Graphics Interchange Format)
es un tipo de formato de imagen que has
visualizado sin duda en pginas web, correos
electrnicos y sobre todo en las redes sociales y
Whatsapp.
Debido a que el tamao del archivo de un GIF es ms
pequeo con respecto a los conocidos formatos de
imagen JPEG o PNG, los GIFs hacen que una web no
pese y se carguen rpidamente.
Lo especialmente interesante de este formato
tambin es que soporta animaciones, es decir se
puede crear un archivo animado con tan slo la
reproduccin rpida de varias imgenes
consecutivas. Las aplicaciones que soportan el
estndar GIF se desplazan rpidamente por cada
imagen produciendo una animacin de unos
segundos, sin sonido y que se va repitiendo en bucle.
Sabas que haran falta ms de 6 Martes
para llenar el volumen de la
Tierra? Ms: https://t.co/IcPNpYW0hB

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

2 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

(https://t.co/IcPNpYW0hB)

pic.twitter.com/eZFGrHCNAa (https://t.co
/eZFGrHCNAa)

111
Shares

NASA en espaol (@NASA_es) 25 de


marzo de 2016 (https://twitter.com/NASA_es
/status/713413025714151424)

29

Aunque este formato existe desde 1987, las


animaciones GIF se han popularizado enormemente
en Internet en los ltimos aos. La adopcin masiva
43

de la tecnologa mvil ha contribuido a la expansin


de
su uso, convirtiendo a los GIFs en una forma de
7
expresin digital ms eficaz y rpida que el texto y
las fotografas. De forma similar a los emoticonos,
los GIFs se utilizan para transmitir visualmente en
segundos una informacin, una idea o una emocin,
captando as nuestra atencin en esta era de
informacin abundante.
@totemguard (https://twitter.com/totemguard)
iClaro que si! Y aplicando las herramientas
aprendidas. Continuamos con el curso
#ctictotem (https://twitter.com/hashtag
/ctictotem?src=hash)

pic.twitter.com/RR5nDGYoZs (https://t.co
/RR5nDGYoZs) Margarita

(@MaggyAV) 6

de marzo de 2016 (https://twitter.com/MaggyAV


/status/706514249518977024)

Con frecuencia estas animaciones se extraen de clips


de pelculas y programas de televisin bien
conocidos e incluyen un texto superpuesto a la
imagen animada. Por este motivo la percepcin de su

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

3 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

uso puede parecer limitada al lenguaje de los


jvenes, al entretenimiento o al humor. Pero
realmente pueden aprovecharse en el campo de
la educacin, especialmente si aprendemos a crear
nuestros propios GIFs o enseamos a nuestros
111

estudiantes a hacerlo.

Shares

Ventajas
de usar un GIF con respecto a
29
un pequeo vdeo
Aunque tengamos la opcin de transmitir la misma
idea
con un pequeo vdeo, un GIF presenta unas
43
ventajas tcnicas y didcticas a tener en cuenta:
7

Reproduccin inmediata: La imagen


animada es tan ligera que se reproduce de
forma inmediata incluso al visualizarlo desde
el mvil. Un vdeo con frecuencia requiere de
nuestra intervencin para que empiece a
reproducirse con una ligera latencia de tiempo
dependiendo de la velocidad de nuestra
conexin WIFI o la red celular. Esta
inmediatez del GIF aumenta las
probabilidades de que otros usuarios vean
nuestra comunicacin.
Reproduccin dentro del mismo correo
electrnico: Los GIFs animados pueden
subirse y mostrarse dentro de un email de la
misma manera que haces con una imagen
normal. En el caso que desees mostrar un
vdeo en un email, dado el tamao del
archivo, has de introducir un enlace para su
reproduccin fuera del email, ya sea en
YouTube u otra plataforma externa. Si el
receptor del email no pulsa en el enlace, se

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

4 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

perder tu explicacin.
Retencin visual: Un GIF animado es en
ocasiones ms fcil de crear que un vdeo y
puede complementar y mejorar la
111
Shares

29

comprensin de un concepto complejo como


en el caso del aprendizaje de un proceso
mecnico, biolgico o qumico.
Impacto emocional: Enviar un mensaje

43

acertado a travs de un GIF puede motivar,


inspirar, hacer recordar o propiciar una
reaccin positiva en los alumnos. Este medio
de comunicacin sin palabras puede ahorrar
tiempo, energa y sobre todo explicaciones
extendidas que acaban ignorando.
Animacin de infografas: El formato GIF
permite dar un toque creativo a una imagen
fija, como en el caso de una infografa, dando
un movimiento repetido a un elemento para
resaltarlo o captar la atencin del lector. Es la
llamada Cinemagrafa (https://es.wikipedia.org
/wiki/Cinemagraf%C3%ADa) .

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

5 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

111
Shares

29

http://www.totemguard.com/aulatotem/wp-content/uploads
43

/2016/06/cheetah.gif)
7

Fuente: Animagraphs by
ONeal Bros
(http://animagraffs.com/cheetahnatures-speed-machine/)

Algunas ideas para usar GIFs


animados como profesor
Tras la explicacin del concepto GIF puedes ver
algunos ejemplos de GIFs animados para usar o
inspirarte para tus comunicaciones o clases:
Mostrar las etapas de un proceso vegetal o
animal, por ejemplo la metamorfosis de una
rana.

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

6 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/05/Frog-Metamorphosis.gif)

Demostrar el Teorema de Pitgoras


111
Shares

29

43

http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/05/pitagoras_demos2.gif)

Exponer datos o estadsticas a travs de un


grfico o diagrama animado, por ejemplo la
evolucin del Imperio Bizantino.

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/05/Byzantine_Empire_map.gif)

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

7 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

Visualizar las revoluciones del sistema solar

111
Shares

29

43

http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/06/acic2VG-Imgur.gif)

Observar el latido de un corazn

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/06/Latido-corazn.gif)

Definir un concepto matemtico como por


ejemplo el ngulo

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

8 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

111

http://www.totemguard.com/aulatotem/wp-content/uploads
Shares
/2016/05/Definicion-angulo.gif)
29

Dar instrucciones detalladas de los pasos a


seguir en un experimento qumico, en una
frmula matemtica o en una receta.
43

(http://www.totemguard.com/aulatotem/wp-content
/uploads/2016/06/huevo2.gif)

Fuente Blog: Conbuenritmo.com

Dinamizar un widget del blog para captar la


atencin del visitante.
Ensear el trazo correcto de letras en cursiva

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

9 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/06/M_cursiva.gif)
111

Cinco sitios web en donde encontrar


GIFs animados

Shares

29

Antes de empezar a crear tu propio GIF, puedes


consultar los siguientes recopilatorios:
1.
43 Google Imgenes
Como con cualquier otro formato de imagen puedes
7

buscar GIFs animados en Google Imgenes. Para


filtrar por este tipo de archivo introduce las palabras
clave en el buscador, pulsa en la pestaa de
Herramientas de Bsqueda, entra en la opcin
Tipo y escoge Animadas del men desplegable.

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/05/Buscar-teorema-pitagoras-gif.gif)

Buscar GIFs animados en


Google imgenes
2. Reddit

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

10 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

Reddit (https://www.reddit.com/r/educationalgifs/) ha
creado una pgina web con un recopilatorio de GIFs
animados de temtica educativa, as como
algunas dedicadas a reacciones qumicas
(https://www.reddit.com/r/chemicalreactiongifs/) o
111

recetas gastronmicas (https://www.reddit.com

Shares

/r/GifRecipes/) . A

travs de las contribuciones de los

29
usuarios
encontrars una larga lista de GIFs con

ttulos descriptivos para conocer su contenido y con


un buscador para poder filtrar entre las imgenes.
43

Estos GIFs educativos no se encuentran alojados en


Reddit
sino que en su mayora enlazan con los
7
GIFs alojados en la plataforma Imgur (http://imgur.com
/r/gifs) , permitiendo

seleccionar ms rpidamente

aquellos que son de contenido educativo que si


visitramos la web Imgur directamente.
3. Giphy
Giphy (http://giphy.com/categories) es un buscador online
con una de las mayores bases de datos de GIFs
animados que pueden compartirse fcilmente en
redes sociales, en el correo electrnico o insertar en
un blog. Las imgenes estn divididas en diversas
categoras, como Arte, Emociones, Animales,
Naturaleza, Ciencia y Pelculas, para as encontrar
rpidamente el GIF ms apropiado para cada
momento y objetivo.

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

11 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

(http://www.totemguard.com/aulatotem/wp-content/uploads
111

Shares

/2016/05/GIFs_Categories_-

_Celebrities__Anime__Sports___More___GIPHY.jpg)
29

4. Wikimedia Commons
De
forma similar a Google, Wikimedia Commons
43
https://commons.wikimedia.org/wiki/Category:GIF_files)
7
ofrece
un buscador que permite filtrar por el formato
de imagen GIF. Puedes ver los pasos a seguir a travs

de este GIF animado.

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/06/Gif-en-wikimedia-commons.gif)

Buscar GIFs animados en Wikimedia


Commons
Recuerda siempre comprobar los derechos de autor
del GIF que utilices al igual que haces con el uso de
una imagen para dar siempre crdito a su autor y
comprobar los derechos que te ofrece su licencia.

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

12 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

Cmo crear GIFs animados


1. Crear un GIF animado a partir de varias
imgenes
Paso 1: Fotografa o encuentra una secuencia
de
111 imgenes
Shares

Transforma una serie de imgenes continuas en un


29
GIF
animado al reproducirlas de forma consecutiva
Paso 2: Sube las imgenes a una aplicacin
43

Para Mac OS X puedes descargar la aplicacin


7
PicGIF
(https://itunes.apple.com/us/app/picgiflite/id844918735?mt=12) ,

que es muy sencilla de usar y

en el caso de Windows, una buena alternativa es GIF


Animator (http://www.gif-animator.com/) . Selecciona las
imgenes que deseas reproducir de forma
consecutiva e imprtalas a la aplicacin.

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/06/PicGIF_y_Editar_entrada_
_Recursos_TIC_para_profesores__WordPress.jpg)

Paso 3: Edita y configura el GIF animado


03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

13 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

Escoge las dimensiones y el tamao del archivo que


quieres que tenga el GIF segn los parmetros que
necesites. Introduce un texto encima del GIF para
complementar tu animacin si crees que es
necesario.
111
Shares

Escoge los cuadros o fotogramas por segundo (fps),


es
29 decir la velocidad a la que deseas se reproduzcan
las imgenes en la animacin. Experimenta y ajusta
consecuentemente con las diferentes velocidades que
te ofrezca el software.
43

Paso 4: Optimiza y exporta el archivo


7

Una vez has creado la animacin, comprime y


exporta el archivo. El tamao del archivo ha de ser
pequeo con el objetivo que no ocupe ms de 5MB.
Para compartir el GIF animado puedes subirlo
directamente a las redes sociales, a tu blog, en la
plataforma Imgur, Dropbox u otro servicio de
almacenamiento de archivos que ya utilices.
Si sobrepasas el lmite para subirlo a una plataforma,
reduce los fotogramas por segundo y/o el tamao de
las imgenes segn veas conveniente.
2. Crear un GIF a partir de un vdeo
En vez de usar imgenes para crear un GIF, muchos
GIFs empiezan como pequeos vdeos que despus
se convierten al formato GIF para compartir ms
fcilmente.
Puedes crear tu propio GIF grabando un vdeo corto
con el dispositivo mvil o extrayendo unos segundos

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

14 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

de un vdeo creado por otro usuario en Youtube.


Paso 1: Graba o busca un vdeo en YouTube
Usa el mvil para grabar un aprendizaje o introduce
111

las palabras clave en el buscador de YouTube. Filtra


los vdeos en esta plataforma por Licencia Creative

Shares

Commons
con permiso para realizar modificaciones.
29

43

(http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/06/Buscar-licencias-cc.gif)

Buscar vdeos en Youtube con licencia


Creative Commons
Paso 2: Descarga el vdeo en tu ordenador
Puedes usar Keepvid (http://keepvid.com/) para
descargar el vdeo de YouTube elegido en tu
ordenador.
Paso 3: Recorta el vdeo
Sube el archivo a un editor de vdeos como Movie
Maker (http://windows.microsoft.com/en-us/windows/moviemaker) en

Windows o iMovie (http://www.apple.com

/mac/imovie/) para

MAC para seleccionar y recortar los

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

15 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

segundos del vdeo que quieres mostrar y crear la


animacin. Intenta que no sobrepase los 10 segundos
para que el tamao del archivo pueda convertirse al
formato GIF.
111

Paso 4: Convierte el archivo de vdeo a


formato .GIF

Shares

29

Existen varias aplicaciones para configurar y


convertir un archivo de vdeo en un GIF animado. La
herramienta ms utilizada es Photoshop
43

http://www.photoshop.com/) por

el grado de control en la

edicin de las capas de las imgenes pudiendo aadir


7

diferentes efectos y texto pero su coste no est al


alcance de todos. Como alternativa podras usar la
aplicacin gratuita Gimp (https://www.gimp.org/) .
Otras opciones ms sencillas, con menos opciones de
edicin pero resultados excelentes, seran las
aplicaciones que mencionaba anteriormente, PicGIF
(https://itunes.apple.com/us/app/picgif/id784260229?mt=12)

y GIF Brewery (http://gifbrewery.com/) para MAC o GIF


Animator (http://www.gif-animator.com/) para Windows.
Subes el archivo de vdeo y puedes aadir efectos de
color, texto y emoticonos. Tras escoger la resolucin
y los fotogramas por segundo (fps), creas el archivo
GIF.
En el caso que no desees descargar ninguna
aplicacin a tu ordenador, tambin tienes la opcin
de trabajar desde el navegador web con la
herramienta Lunapic (http://www150.lunapic.com/editor
/?action=crop-video) , aunque la

interfaz es menos

intuitiva en comparacin a las anteriores.

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

16 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

Ten en cuenta que al pasar el archivo de vdeo a un


formato .GIF, la calidad de la animacin ser
inferior, especialmente si hay una gran cantidad de
colores en el vdeo original.
111
3.
Crear un GIF grabando la pantalla del
ordenador

Shares

En
29 el caso que quieras mostrar las funcionalidades
de un software o un detalle en una pgina web, existe
la opcin de capturar una accin de la pantalla del
ordenador.
43

La herramienta que uso con ms frecuencia para


7

ayudar a los alumnos en mis Cursos TIC o para


ilustrar explicaciones en entradas del blog es
Record.it (http://recordit.co/) , que permite rpidamente
grabar lo que ves en pantalla, mostrar unos pasos a
seguir y crear un GIF para subir a un foro de dudas,
un email o las redes sociales. Esta aplicacin est
disponible en Windows y MAC.
4. Crear una cinemagrafa
Una cinemagrafa es una fotografa fija en la que
ocurre un movimiento concreto repetido, dirigiendo
nuestra atencin a esa accin. Dos fotgrafos
americanos popularizaron esta tcnica para dar vida
a sus fotografas de moda considerndose una forma
de arte: Cinemagraphs (http://cinemagraphs.com/) .
Para crear una cinemagrafa se han de tomar una
serie de fotografas o realizar una grabacin de vdeo.
A travs de un software de edicin de imgenes,
como Photoshop, se recomponen los fotogramas en
un archivo GIF animado. La idea es dejar una
imagen esttica y escoger un movimiento del vdeo

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

17 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

para que se reproduzca dentro de la imagen de forma


repetida dando la sensacin de que la foto est viva.

111
Shares

29

43

http://www.totemguard.com/aulatotem/wp-content/uploads
/2016/05/25662203185_1fcbaae846_o.gif)

Fuente: DJANDYW.COM (https://www.flickr.com/photos


/djandywdotcom/25662203185/in/photolist-e9v7FN-E9eTkaE9hCap-F4j4wj-EV8DjL-EV7YfU-F6FuX4-F6Czop-EyAmG2nDZsbW-Du7oxT-EVaQRE-E9f5dT-F4iSsA-ED4pM7-Eqi1RizQVTWP-EVdQao-E8VX9u-E8ZDS7-EV89gW-EAbuyDED35MA-F4mB5f-EXsjBp-EVdP21-BZxmAv-EVdBqA-sXqNUsE9f8A4-ED3tLb-ov3UjH-oMx3Ba-F6Cecx-xsJgKW-xdxMcaEXqeag-GATnCA-ED9NVM-Du7ubB-mTNrs8-DwdReJ-zGZdaAvPNq4P-sXEEDa-rY2hUm-sdiWcE-qbmMkW-p7mrQS-nw4nrb)

en Flickr
La creacin de una cinemagrafa conlleva horas de
edicin de un vdeo, pero una aplicacin disponible
en MAC, Cinemagraph Pro (https://flixel.com/products
/mac/cinemagraph-pro/) , simplifica

y agiliza el proceso

si deseas iniciarte en este tipo de GIFs. Una


aplicacin alternativa para Windows es Blink Cliplets
(https://www.microsoft.com/en-us/store/apps/blink-cliplets
/9wzdncrfjb2b) ,

aunque desconozco su facilidad de uso

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

18 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

ya que no he tenido la oportunidad de trabajar con


ella.
Para encontrar cinemagrafas ya creadas en Internet,
tambin puedes consultar el buscador de Reddit
111

https://www.reddit.com/r/cinemagraphs)
Shares

que ha creado un

recopilatorio dedicado a este tipo concreto de GIF


animados.
29
Pregunta: Tienes ideas de cmo introducir
los GiFs en tus clases, en las redes sociales o
43

en tus comunicaciones? Puedes dejarme un


comentario pulsando aqu
7

http://www.totemguard.com/aulatotem/2016/06/gifsanimados-que-son-como-usarlos-encontrarlosaplicaciones-crear-archivos/#respond) .

Entradas Relacionadas:

La Clase Invertida: Cmo


crear tu propia Khan
Academy

(http://www.totemguard.com/aulatotem/2012/01/como-creartu-propia-khan-academy/)

Las mejores aplicaciones de


iPad para profesores y
alumnos

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

19 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

(http://www.totemguard.com/aulatotem/2012/02/las-mejoresaplicaciones-de-ipad-para-profesores-y-alumnos/)

111
Shares

29

Cmo usar gratuitamente y


legalmente una fotografa
de pago en tu blog
43

http://www.totemguard.com/aulatotem/2015/02/comousar-gratuitamente-y-legalmente-una-fotografia-de-pago-en-tu7
blog/)

Chromebooks en educacin:
Qu son y sus ventajas
sobre porttiles y tabletas

(http://www.totemguard.com/aulatotem/2015/09
/chromebooks-educacion-ventajas-portatiles-tabletas/)

Meritxell Vias
(http://www.totemguard.com
/aulatotem/author/meritxell-vinas/)
Te gust este artculo? Suscrbete al blog por
email AQU (http://www.totemguard.com/aulatotem
/contacto/) .

Meritxell es asesora y formadora en

nuevas tecnologas aplicadas a la educacin.


Embajadora de Evernote y Consultora Certificada
de Evernote Business (EBCC) para centros

03/06/2016 1:17

GIFs animados: Qu son, cmo usarlos, encontrarlos y aplicaciones pa...

20 de 20

http://www.totemguard.com/aulatotem/2016/06/gifs-animados-que-so...

111
Shares

29

43

03/06/2016 1:17