Creación de contenidos digitales audiovisuales para la Web. Edición 2017. Facultad de Comunicación y Documentación. Universidad de Granada

1. Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticos
Grado en Comunicación Audiovisual
Universidad de Granada
http://utopolis.ugr.es/medialab
@media4ux
Tema 2 Ideación y creatividad
audiovisual en la red
Feb 2017 (5ª ed)
03a Creación y Difusión de Nuevos Contenidos Audiovisuales B
Producción para la Web
https://www.slideshare.net/mgea/produccion-creativa-para-web/

2. Webseries
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 2
'Paquita Salas' webserie que triunfa en los Premios Feroz 2017
http://www.flooxer.com/video/paquita-salas-promo-premios-feroz/58876fc0986b2846ea4ee2d9
http://www.flooxer.com/video/paquita-salas-capitulo1-casada-con-esto/577cf2ea0cf211657ad31ecf

3. WEB
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 3
El usuario permanece una media de 10-15 seg para saber si una página
es interesante
• El 99% de las páginas web general un efecto de enojo
(anger).
• Motivaciones: Diferente calidad, sensación de perder el
tiempo, tiempo de carga
• Los primeros 10 segundos son críticos para la decisión de
permanecer o abandonar página
C. Liu, R. White, S. Dumais. Understanding web browsing behaviors through Weibull analysis of dwell time. Proceedings of the
33rd international ACM SIGIR conference , 2010. ref:http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

4. Creatividad en la Web. positivo
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 4
• Creación de comunidades. La Web es un medio único para comunicar y
compartir opiniones. En caso de comunidades basadas en la narración y
creatividad son elementos claves.
• Carácter dinámico. Facilitad para actualizar y generar nuevos contenidos y de
diferente naturaleza.
• Participativa. Los usuarios pueden interactuar con el contenido y con otras
personas. Se posibilita el entreteniminto, y la narración interactiva, de mútiples
formas: tomar parte en un personaje (primera persona), seleccionar contenidos..
• Profundidad. Se pueden profundizar en el contenido, conociendo más acerca de
los personajes, autores.
• Sin edad. Existen contenidos para toda las edades. Desde un contenido más
juvenil,. The Web allows users to express themselves and be creative. Users enjoy
customizing and personalizing content in various ways.
• Organizado y fácil de navegar.
• Fragmentos de consumo rápido. Píldoras de contenido que se pueden
consumir rápidamente en cualquier lugar. [Millner14]

5. Creatividad en la Web: técnicas
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 5
> Video
> Canales
> Web / Websites
> [HTML] Interactividad
> [CMS] Gestores de contenido: Blogs…

6. Web > Creatividad en Video
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 6
Internet facilita diferentes modelos de narrativas, pero el video se ha convertido
en una de las canales de creación de contenidos más importantes y que genera
mayor tráfico de Internet.
Youtube (2005, C. Hurley, S. Che, J. Karin) es la empresa para alojamiento de
video que se hizo más popular. En 2006 es adquirida por Google. Actualmente
genera más de 2.000 millones de visitas cada día y representa el 10% de todo el
tráfico de internet.
Se ha generado una cultura de consumo de video, apareciendo fenómenos como
las webseries, youtubers, elearning (KhanAcademy), etc. El usuario invierte una
media de 900 segundos al día en YouTube. Duración media de los vídeos en
YouTube es de 2’45” minutos
Vine (2012, D. Hofmann, R. Yusupov, C. Kroll) fue una App que facilitaba la
reproducción de videos cortos en movil. Se popularizó su uso en Twitter para
videos de 6s. de reproducción en bucle. Adq
[Millner14] [Burgess09]

7. Web > Video producción digital
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 7

8. Everyday
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 8
Everyday de Noah Kalina
Una foto al días durante 12 años
(01/2000)
https://www.youtube.com/watch?
v=6B26asyGKDo (6 años)
https://www.youtube.com/watch?
v=iPPzXlMdi7o (12años)
http://noahkalina.com/
She takes a Photo every day
(Noticia 2006-12) @clickflashwhirr
http://www.youtube.com/watch?
v=wfUInXy88-o
http://www.huffingtonpost.com/
2011/11/11/she-takes-a-photo-
every-day-video_n_1088671.html
The Simpsons - Pic A Day
For 39 Years (The true story of Homer
Simpson) Parodia de N. Kalina
https://www.youtube.com/watch?
v=zcAL7bzjAJ0

9. #MannequinChallenge
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 9
27 de octubre 2016 - 1er reto Ed White (estudiante)
en instituto de Florida
https://www.youtube.com/watch?v=htkkWndO0AE
El primer vídeo del Mannequin Challenge hace
“oficial” la música e Rae Sremmurd - Black Beatles
https://www.youtube.com/watch?v=b8m9zhNAgKs
Viral en twitter con hashtag #MannequinChallenge
Facultad de Ciencias Económicas y Empresariales UGR
https://www.youtube.com/watch?v=7H7S11ok2v0
Parque de las Ciencias Granada (Dic 2016)
https://www.youtube.com/watch?v=Vhw6Q8bk2ho
Acción congelada:
https://www.youtube.com/watch?v=wNPxoe7UBl4
Futbolistas famosos:
https://www.youtube.com/watch?v=JeYOUWcLprg

10. Interpretación / Sketch
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 10
Canal de video producción http://RhettandLink.com/
Animación Youtube con Stopmotion: T-shirt war
http://www.youtube.com/watch?v=DKWdSCt4jGE
Producción en Vine, videos cortos de 140s en loop. Incrustado en
micronarrativas: Instagram, twitter
Manuel Huedo @ManuelHuedo
https://vine.co/Manuel.Huedo
https://twitter.com/i/videos/tweet/826785987762204672
https://www.youtube.com/watch?v=l--v3tGMxPI
https://www.youtube.com/watch?v=m-PiTu2cEco (antón Lofer)
La Web (a través de su soporte para video) se ha convertido en una plataforma perfecta para
desarrollar cortos basados en
Canal Patata Pirata (youtubers) ComAv UGR
https://www.youtube.com/watch?v=8of0QQorZ4M#t=49

11. Storytelling mediante animación
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 11
RSA Animate
Dibujando la historia en un lienzo
https://www.youtube.com/watch?v=Z78aaeJR8no
Changing Education Paradigms
Common Craft
http://CommonCraft.com/
WWW in plain English
https://www.youtube.com/watch?v=l6IsN8Mv5Hk
Twitter in Plain English
https://www.youtube.com/watch?v=ddO9idmax0o

12. Canal vblog
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 12
Canales web temático musica: Noise Off TV
https://www.youtube.com/channel/UCSTf8YREK-EhGBjeqlZuxYA

13. Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 13
http://boxesandarrows.com/experience-themes/
Experiencia en Web

14. Web 2.0 Apps: genial.ly
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 14
Creando presentaciones interactivas. Permite exportar a HTML
Alternativa a Prezi
http://www.genial.ly

15. Web 2.0 Apps: Narraciones en Timeline
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 15
- App/programas: BEEDOCS
Timeline 3D (Mac OSX)
https://itunes.apple.com/us/app/timeline-3d/id929188617?mt=12
- Servicios online: Tiki-Toki
https://www.tiki-toki.com
- Programación (javaScript) TimelineJS
https://timeline.knightlab.com
https://www.tiki-toki.com/timeline/entry/816564/i-media/

16. Web 2.0 Apps: list.ly
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 16
http://list.ly/list/VL8-cine-futuro-digital

17. Web > Publicación
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 17
UN CMS (Content Management System) o gestor de contenido es una
aplicación informática usada para crear, editar, gestionar y publicar contenido
digital multimedia (en la Web) en diversos formatos.
Se dispone de plantillas y funciones para gestionar usuarios, añadir
contenidos, modificar la apariencia sin tener que conocer detalles de código
HTML.
Para almacenar la información requieren de una base de datos y un lenguaje
de programación de los distintos módulos.
Pueden ser servicios online o paquetes que hay que instalar en un servidor.

18. Gestores de contenidos (CMS)
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 18
Gestores de comunidades:
• drupal (http://www.drupal.com/)
• joomla (http://www.joomla.org/)
Blogs
• Wordpress (http://www.wordpress.org/)
• Wordpress (http://www.wordpress.com/) ONLINE
• Blogger (http://www.blogger.com/ adquirido por google) ONLINE
Microblogging
• Twitter
• Tumblr
Portfolio
• Behance (http://www.behance.net/) ONLINE
• DevianArt ( http:///www.deviantart.com/) ONLINE
Escritorios
• Netvibes (http://www.netvibes.com/ ) ONLINE

19. Gestores de contenidos (CMS)
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 19
Los Blogs es un cuaderno digital donde periódicamente se publican
artículos. Más del 10% de sitios web están basados en Blogs. Organización.
Categorías / etiquetas. Fechas.
Enlaces:
- permanente (permanent-link)
- trackback (enlaces inversos)
- blogroll (lista enlaces a otros blogs)
- sindicación (seguimiento RSS)

20. Blogs: recomendaciones
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 20
• Simplificar diseño. Estilo orientado a tu
audiencia.
• Legibilidad, centrar atención en
contenido
• Adaptado para diferentes navegadores
(incluidos móviles)
• Facilitar la comunicación
• Promocionar medios sociales.
• Bitácora / Diario
• Tematica: resolver dudas…
• Portafolio
• Monetización (sponsorización/
publicidad)
• De autor/opinión
• revista
• (CV)

21. Web > Interactividad
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 21
[Millner14]
Basado en diferentes alternativas:
* Applet/embebidos (flash, applet Java, Shockwave…)
* HTML5/CSS/ JavaScript
http://www.elmundo.es/grafico/espana/2016/01/14/56961c6a46163f226e8b4617.html
html5maker
http://html5maker.com/app
Google Web Designer
https://www.google.com/webdesigner/

22. Efecto Parallax (scrolling)
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 22
El efecto Parallax (scrolling) es un proceso de animación 2D que crea la ilusión de profundidad
animando las capas de primer plano más rápido que las del fondo.
Este método fue inventado por Disney para dotar de un aspecto tridimensional por capas a las
películas de dibujos animados. Este proceso se bautizó como “cámara multiplano” y más tarde se
adaptó al mundo de los videjuegos.
https://www.youtube.com/watch?time_continue=3&v=86zPz3J4MdM
Uso para storytelling. Se puede aprovechar este recurso estético como complemento narrativo
para landing pages, o webs que tengan algo muy concreto que contar en varios pasos. En estos
casos, el efecto de profundidad y linealidad que proporciona el Parallax son perfectos para sumergir
al usuario en la historia con una experiencia comunicativa mucho más divertida y cercana a otros
medios como el videojuego o el cómic mediante uso de HTML5 y CSS3
www.numero10.ch/fr/home/ www.madwell.com/

23. Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 23
Interacción: Web (Layout) animado
23
http://reportajes.lavanguardia.com/africa/ http://graphicnovel-hybrid4.peugeot.com/
http://beta.wind-and-words.com/ http://www.cabletv.com/the-walking-dead

24. Storytelling & Layout Web
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 24
http://www.soul-reaper.com
La productora Saizen Media reinventa el comic digital
Soul Reaper HTML5 Scroll Book es el primer comic en HTML5 activado por scroll

25. Video Interactivo
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 25
http://video.bobdylan.com/
“Like a Rolling Stone” (1965) de Bob Dylan se convierte en un clip interactivo (2013)
Video: LIKE A ROLLING STONE
Autor: Vania Heymann. Fuente: RollingStone.com
https://interlude.fm/

26. Video interactivo
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 26
http://interlude.fm
Video: INTO THE WOODS
Autor: Adrián Amorós, Comunicación Audiovisual (TFG 2014-15)
https://v.interlude.fm/v/zRPbvV

27. Video interactivo
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 27
http://interlude.fm

28. (video-clip) device-media Interactive
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 28
“Knock Knock”
Brunettes Shoot Blondes
https://www.youtube.com/watch?v=RC_0NzJ2mWA
“Bittersweet”
Brunettes Shoot Blondes
https://www.youtube.com/watch?v=jrnKiCIQNiQ

29. Proyectos
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 29
http://www.genial.ly/View/Index/5739778d4593761974d08876
http://www.genial.ly/574b76f71c71d318d00bd98b/espejismo

30. Referencias
Producción para la Web. Creación Y Difusión de Nuevos Contenidos Audiovisuales-B http://utopolis.ugr.es/medialab 30
• [Millner14] C. H. Millner: Digital Storytelling: A Creator's Guide to Interactive
Storytelling. 3ª ed. Focal Press, Elsevier 2014
• Nuria Lloret, Fernando Canet: Nuevos escenarios, nuevas formas de expresión
narrativa: La Web 2.0 y el lenguaje audiovisual. https://www.upf.edu/hipertextnet/
numero-6/lenguaje-audiovisual.html
• [Burgess09] YouTube : online video and participatory culture / Jean Burgess and
Joshua Green ; with contributions by Henry Jenkins and John Hartley, Polity | 2009
(FBD/316.7 BUR you)