Producción creativa para Web
-
Upload
miguel-gea -
Category
Education
-
view
27 -
download
1
Transcript of Producción creativa para Web
Miguel Gea ([email protected]) 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/
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
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/
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]
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…
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]
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
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
#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
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
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
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
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
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
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/
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
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.
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
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)
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)
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/
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/
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
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
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/
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
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
(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 Blondeshttps://www.youtube.com/watch?v=RC_0NzJ2mWA
“Bittersweet”Brunettes Shoot Blondeshttps://www.youtube.com/watch?v=jrnKiCIQNiQ
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
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)