producció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


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


• 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


> Video > Canales > Web / Websites > [HTML] Interactividad > [CMS] Gestores de contenido: Blogs…

Web > Creatividad en Video


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


Everyday


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


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


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


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


Canales web temático musica: Noise Off TV

https://www.youtube.com/channel/UCSTf8YREK-EhGBjeqlZuxYA


http://boxesandarrows.com/experience-themes/

Experiencia en Web

Web 2.0 Apps: genial.ly


Creando presentaciones interactivas. Permite exportar a HTML Alternativa a Prezi

http://www.genial.ly

Web 2.0 Apps: Narraciones en Timeline


- 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


http://list.ly/list/VL8-cine-futuro-digital

Web > Publicación


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)


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)


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


• 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


[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)


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/


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


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


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


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


http://interlude.fm

(video-clip) device-media Interactive


“Knock Knock”Brunettes Shoot Blondeshttps://www.youtube.com/watch?v=RC_0NzJ2mWA

“Bittersweet”Brunettes Shoot Blondeshttps://www.youtube.com/watch?v=jrnKiCIQNiQ

Proyectos


http://www.genial.ly/View/Index/5739778d4593761974d08876

http://www.genial.ly/574b76f71c71d318d00bd98b/espejismo

Referencias


• [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)