Producción Multimedia Master Artes Digitales, 2006 IUA-IDEC-UPF

1. Producción MultimediaMaster Artes Digitales, 2006IUA-IDEC-UPF Daniel Julià, Anna Fuster

2. Presentación Análisis, simulación y puesta en práctica de las etapas que forman parte del diseño y desarrollo de una aplicación multimedia completa. • Diseño • Contenido • Interface/Usabilidad • Programación • medios digitales • Etc…

3. Temas • Contexto, y visionado deproyectos • Análisis de casos, usabilidad, fases deproducción. • Diseño gráfico e integración (flash y html) • Gestión de contenidos y de medios(información dinámica, video, imagen, sonido) • Tema abierto (debate) • Entornos multiusuario • Flash remoting • Imagen en Flash 8 • ¿Ejercicio común?

4. Herramientas de trabajo • Flash / actionscript • Fireworks • Dreamweaver • (*) Wiki http://www.iua.upf.es/~dani/mad06 • (*) Del.icio.us http://del.icio.us/mad06 login: mad06/mad

5. Práctica • Creación de una aplicación multimedia guiada en todas las fases de producción. Un book (portafolio) interactivo con dos accesos, uno en flash (con elementos multimedia y visualizaciones) y otro en html (accesible y usando standards) • La próxima semana explicación detallada

6. Un poco de historia…

7. Historia • Internet nació en el medio académico-cientifico-universitario. • Estructura Cliente-Servidor • Los ordenadores eran muy caros, era mas eficiente usar varios terminales “tontos” y baratos conectados a un único servidor inteligente “inteligente” y “caro”.

8. Origenes de Internet • En 1990 primer servidor y la www • En 1992 se creó el primer navegador “Mosaic” seguido poco después por Netscape (creado por el mismo equipo) • A mediados de los ‘90 empezó a introducirse en el gran público (con el navegador Netscape)

9. Fuente:http://en.wikipedia.org/wiki/History_of_the_Internet

10. MS Internet Explorer • En 1998 Microsoft reacciona e integra su navegador “Internet Explorer” en el sistema operativo “Windows”. A partir de entonces es el líder en porcentaje.

11. Mozilla • El codigo fuente de Netscape es liberado (Mozilla) y se crean varias versiones la mas popular de las cuales es “Firefox”.

12. Origenes • Netscape en las primeras versiones era a la vez que un navegador, un editor de páginas web (esta funcionalidad se perdió con el tiempo). • La gente (y las empresas) creaban páginas en HTML estático. Editadas a mano. Con texto e imágenes en el documento.

13. Evolución • E-mail • WWW. Hypertexto (html) • Motores de búsqueda (Lycos ’93) • Burbuja “.com”, punto álgido marzo 2000, luego explosión (2001)

14. Origenes, ‘90 • Velocidad de conexión muy baja (modem 14-28 kbps) • Las páginas se creaban “a mano” en html. • Como máximo se incluían imágenes (pero que no pesaran demasiado) • Páginas personales y de presentación de empresas • Navegación muy sencilla (mapas en imagenes por ejemplo) • Applets Java, y mas adelante shockwave/director la única posibilidad de poner contenido multimedia en la red. http://www.iua.upf.es/dotze_sentits/

15. CD-ROM • Usado en proyectos interactivos en los años 90. • Era el único medio que permitia usar elementos multimedia y interficies complejas (ahora es posible hacerlo en internet) “Dotze sentits”

16. Finales de los ‘90 • Aumenta la velocidad de conexión un poco (modem 56kbps, RDSI, primeros ADSL 256kbps) • Contenidos dinámicos. Comercio electrónico. Buscadores (google). • Portales (terra,etc) • Empieza la publicidad en Internet • Flash se impone como manera de crear animaciones.

17. Principios de los ‘00 • Velocidad de conexión (aumenta mas, ADSL se generaliza, 256kbps habitual) • La red se descentraliza (P2P), emule, MSN messenger, ICQ, blogs. • Flash para hacer aplicaciones completas (Rich Internet Applications?) • Programas “open source” • Los contenidos dinámicos se generalizan (php/mysql) www.agatharuizdelaprada.com

18. www.archive.org • Almacena versiones “antiguas” de webs. • Permite observar la evolución de algunas páginas. • http://www.archive.org • http://web.archive.org/web/19970706000259/http://www.iua.upf.es/

19. Contexto actual

20. Contexto actual • Mas velocidad todavia! • Contenidos mas pesados en la red. Ejeemplo: Video. http://video.google.com • Vuelta a la simplicidad? • Standares. Accesibilidad.Agregación. Separación de la presentación y el contenido. • Web 2.0.

21. Porcentajes actuales Navegadores: Internet Explorer 70% Firefox 25% Otros 5% S.O.’s: Windows 92% Mac 4% Linux 4% (datos aproximados)

22. Resoluciones de pantalla 1024x768 o más 75% 800x600 20% desconocida 5%

23. Web 2.0. • Una “segunda fase” de arquitectura y desarrollo de aplicaciones en la red. • Web optimizada (también para máquinas) • Agregación de contenidos • Web editable • Software social

24. Web 2.0. • Incluye por ejemplo wikis, Blogs, la sindicación de contenidos (RSS), las APIS de servicios • Aplicaciones (software social) conocidas; Google maps, flickr, technorati, del.icio.us • El contenido lo generan los usuarios. Se establecen redes. Se reutiliza la información. • Claramente separado el contenido de la presentación (varios canales de difusión para un mismo contenido, RSS, agregadores de noticias, blogs, etc. )

26. Tecnologia de la web 2.0. • CSS +XHTML (http://www.iua.upf.es/mtg/reacTable/?related) • Ajax(http://www.randomchaos.com/games/fastr/) • SVG (http://www.carto.net/papers/svg/samples/japan_map_itinerary/japan.svgz) • Sindicación y agregación en RSS/Atom (http://www.google.com/reader/) • URLs limpias y con sentido (http://del.icio.us) • Publicación en weblogs y wikis (www.wikipedia.org) • APIs de servicios en internet (http://www.google.com/apis/maps/) • Aspectos de redes sociales (www.ebay.es)

27. Modas(en orden cronológico)

28. La moda de la página personal • Quiero tener una página web! • En la “home” pondré bienvenidos! • Explicaré todas mis intimidades y aficiones • Pondré una foto mía y de mis amigos y familia (si es una empresa las fotos del jefe..) • Pondré una lista con mis links favoritos • Escribiré sobre temas a cada cual mas raro • Pondré fondos muy chulos y todos diferentes! • La haré editando el html con un editor visual que es muy fácil y subiéndolo por ftp http://www.terra.es/personal/gsabater/

29. ¿Página personal? • Justificación • Se podía hacer otra cosa? • Quiero presencia en la red • Defectos • Realmente le importa a la gente lo que escribes? Te van a encontrar? Cada uno se lo monta diferente, falta de standards. No hay comunidad Mejor un BLOG

30. La moda del GIF animado • La ley de… ¿Sise puede hacer porqué no hacerlo? • Mejor si en el texto combino todos los colores de la paleta, llama mas la atención • Mejor en “loop” así no paran de moverse • Me copiaré ese tan “chulo” que vi por ahí, es fácil copiar. • Si los repito todos mejor! http://personal.redestb.es/mcarreras/

31. Gif animados? • Justificación • Se puede hacer! Es lo mas “cool” • Quiero llamar la atención • Defectos • Despista la atención y cansa • ¿Sirven para algo? ¿Ayudan a la navegación? Se han quedado en recurso publicitario

32. La moda del portal • Estará tan repleto de información que la gente no sabrá por donde empezar • Ofreceré cuentas de email gratuitas, ofertas y todo lo que pueda parecer gratis • Lo llenaré de banners de publicidad ese es mi negocio • Cuanta mas información y cuanto mas tráfico mejor • Cualquier tipo de información vale. http://www.terra.es/

33. ¿portal? • Justificación • Quiero generar mucho tráfico que me vea mucha gente ofrecer muchos servicios y subir en bolsa (ya valgo millones!) • Defectos • Realmente no le intereso a la gente. Ya busco lo que quiero en google. Me satura tanta información. No me importa lo que vales en bolsa sino que me digas algo interesante. Portales verticales (solo un tema específico)

34. La moda de la intro en Flash • Para hacerlo mas espectacular! Crear una buena impresión inicial. • Si pones “skip intro” No problem! • Si es 3D y todo se mueve mucho mejor • Con efectos sonoros ya es una pasada! • Lo mas, si lo sabes hacer, que tenga un movimiento dinámico y usar texturas “chulas” http://www.linguamater.com/intro.swf http://www.kursor.tv/menu.htm http://www.jcsheriff.com/jcsheriff2.swf http://www.gonzalezhermanos.com/

35. ¿intro flash? • Justificación • Quiero llamar la atención, dejar una buena impresión. Mi web tiene que estar a la última. Los otros lo hacen. Es una pasada • Defectos • Si es chulo, pero lo he visto dos veces y ya cansa. Quiero llegar a la información que busco sin perder tiempo. desaparecido

36. La moda de los webs en flash • Toda la información en flash. El html es muy pobre no se puede hacer casi nada, en flash soy mas libre de crear algo original. • Efectos sonoros electrónicos y sutiles. • Las secciones se despliegan independientemente • Preloads muy “chulos” cuando se carga algo, persianas. • Fuentes “pixel” http://www.pixel-delight.com/

37. ¿web integramente en flash? • Justificación • Puedo hacer un interface mucho mas cuidado y original. Usar las tipografías que quiero. Efectos de transición. Sonido. Funciona igual en cualquier navegador y sistema operativo. No tiene que recargar las páginas cada vez. • Defectos • Los buscadores no me encuentran, la información está escondida dentro del flash. No puedo poner links a las secciones. ¿No puedes crear lo mismo en html? Justificado si quiero visualizaciones interesantes

38. La moda del blog • Explicaré mis “paranoias” a todo el mundo • Usaré un sistema (CMS) para actualizar el contenido es tan fácil! • Postearé muy a menudo aunque me lean 4! Y pondré con cuidado los links • Sino tienes blog estás “out” • Pondré mis fotos en el flickr y me buscaré en technorati • Variantes… foto blog, video blog, podcasts,etc… www.microsiervos.com

39. ¿blog? • Justificación • Quiero estar a la última. Tengo mucho que contar. • Defectos • ¿No te vas a cansar nunca de “postear”?