Unidad 1 
Los sistemas multimedia son un nuevo medio de comunicación que se vale de textos, imágenes, gráficos, audio, animación y video para comunicar. Reamente estamos en la era de la información y por ello la multimedia es un medio también.
La materia será desarrollada utilizando Google Web Designer, que puede ser instalado tanto en Windows, Linux o Mac. Para su instalación se necesitan ciertos requerimientos del sistema siendo los más importantes los de la resolución de pantalla y la memoria ram.
Este software permite desarrollar mutimedia basada totalmente en HTML5, CSS3 y javascript. No sólo permite diseñar y desarrollar banners conforme a las pautas que Google ha especificado para Adwords sino el diseño y desarrollo de animaciones que no tengan que ver con el entorno de marketing de Google, como ser sliders, paǵinas HTML5, etc.
Ello implica también que podremos modificar el código y ajustarlo a nuestras necesidad, así como verificar la velocidad de carga.
Contenidos
- Concepto de Multimedia. Hipermedia
- Diseño Multimedial. Guión multimedia
- Herramientas de Diseño y Desarrollo Multimedia. Google Web Designer. Validación HTML5. Performance
- Google Web Designer y Guión Multimedia: Introducción, vista previa y publicación local. Vinculación con el Guión Multimedia
¿Qué es la Multimedia?
Los sistemas multimedia son un nuevo medio de comunicación que se vale de textos, imágenes, gráficos, audio, animación y video para comunicar. Reamente estamos en la era de la información y por ello la multimedia es un medio también.
Parte de su gran desarrollo en los últimos años es que han sido y son facilitadores del aprendizaje.
Otra característica importante de esta nueva tecnología es la interactividad con el usuario y probablemente el puntapié inicial tiene mucho que ver con el hipermedia.
Hipermedia:
En realidad el gran desarrollo de la multimedia tiene que ver con el hipertexto del servicio www de la Internet desde la web 1,0 a la web 2,0 y con la introducción de HTML5 lo que se busca es adaptar la web al usuario.
Básicamente HTML5 comprende 3 elementos que se conjugan: HTML5 que es el lenguaje de marcado del servicio www, javascript que es un lenguaje de programación que se ejecuta el lado del cliente, es decir, del lado del usuario o sea en el browser del usuario, su objetivo es dar interactividad y finalmente CSS u hojas de estilo con lo cual se le da el estilo que se quiere y se necestia al contenido web o multimedial (tiene que adaptars, e en forma instantánea al dispositivo, o sea diseño web/multimedial responsivo)
Por lo tanto el diseño y programación multimedial tiene que ver con cómo se conjugan los diferentes elementos multimedia (texto, imágenes, audio y movimiento) para transmitir el mensaje que se quiere comunicar.
Es importante tener en cuenta las tareas de análisis y diseño en función de lo que queremos comunicar, motivo por el cual es imprescindible comprender qué es y para qué sirve el guión multimedia. Básicamente consiste en la descripción de los elementos multimedia que utilizaremos, su secuenciación y duración.
El guión no es estático, motivo por el cual conviene utilizar diferentes versiones usando un simple archivo de texto y también cuando empezamos con un prototipo, conviene siempre guardar teniendo en cuenta versiones.
¿Qué es el Diseño Multimedial?
El diseño multimedial combina los distintos soportes de la comunicación –el texto, el sonido, la imagen, la fotografía, la animación gráfica y el video de una forma interactiva, creando un vínculo participativo con el usuario. Es decir, se centra en la interactividad junto a aspectos del diseño de la imagen en sus diversos soportes. La idea es captar la atención del usuario apoyados en lo visual pero el fin es comunicar una idea.
El diseño multimedial es un proceso puesto que para diseñar y desarrollar un product multimedial es neceario saber qué se quiere transmitir; esto es fundamental como así también tener bien definido quién es el destinatario de dicho mensaje.
Por lo tanto se puede decir que el diseño multimedial abarca varios campos de conocimiento pero es innegable que es necesario estar actualizado con las nuevas tecnologías web.
Como parte de este proceso es importante crear una ficha técnica o de producto que resuma el proyecto, ya que un diseño multimedial realmente es un proyecto:
- La idea central o concepto que se quiere comunicar,
- el público objetivo, es decir a quién va destinado y
- una breve descripción de cómo se podría llevar a cabo.
Antes de empezar a diseñar es importante desarrollar un guión multimedia que contemple las diversas escenas, sus funcionalidades, su nivel de interactividas y con qué herramientas o elementos se concretarán.
En esto es muy importante detallar el tipo y formato de archivos que se utilizarán por ejemplo en el caso de imágenes. Un ejemplo típico es el caso de los banner que el cliente necesite banners tanto horizontales como verticales. Por lo general nos aporta imágenes del negocio, por lo tanto la tarea profesional no sólo implica considerar las escenas y su movimiento sino también el tratamiento de dichas imágenes, que además, tienen que estar optimizadas para la Web.
Necesitamos llegar al producto final pero al ser un proceso implica que es necesario, con el mismo software u otro, crear prototipos con diferente tipo de versiones de modo tal de poder chequear e ir probando con el cliente o el usuario. A veces no sólo es recomendable, es un requisito solicitado por el cliente, el uso del storyboard.
Ejemplo de un Proyecto Real
Este es un proyecto real. Es importante tener en cuenta los requisitos que se solicitan Proyecto Real
Esta es la estructura de archivos de mi instalación:

Google Web Designer y Guión - Ejemplos Reales
Para ingresar a esta sección del sitio web deberá validar sus datos
Google Web Designer y Guión Multimedia
Todo lo relativo a la interfaz de Google Web Designer así sobre cómo obtener la vista previa o la publicación local del proyecto está claramente explicado en la Ayuda de Google Web Designer
Sin embargo lo que no está tan claro es cómo vincular el proyecto de software al Guión Multimedia. Esto es válido siempre, independientemente que se trate de un Banner para Adwords o no, de un slider, etc.
Vale la aclaración puesto que la mayoría del material de ayuda y tutoriales presentes en Internet enfocan el uso de esta herramienta desde un punto de vista eminentemente práctico y focalizado a cómo utilizar un cierto elemento o componente.
Es decir, por una cuestión didáctica se hace abastracción del guión multimedia, pero es bueno recordar que el Guión Multimedia no sólo nos sirve para organizar el argumento del proyecto sino todo nuestro trabajo, incluyendo los elementos multimedia que utilizaremos en cuanto a su formato, duración, etc.
Software
El software que se necesita tener instalado es
- Planilla de Cálculo o Procesador de Texto: importante para la elaboración del guión multimedia
- Google Web Designer
- Software de Tratamiento de imágenes en formato bitmap: Photoshop o Gimp
- Software de Tratamiento de imágenes en formato vectorial: Illustrator o Corel
- Software editor de HTML5: Google Web Designer permite editar el código HTML5, sin embargo si queremos tener más control sobre el código podríamos utilizar también alguna de estas alternativas que además son gratuitas:
- Netbeans IDE versión (HTML5/javascript) para Linux, Mac y Windows;
- Notepad++ sólo para Windows;
Recursos
Webs con recursos
Ejemplo de guiones
- Ejemplo de guión técnico
- Esquema de ficha-guión a usar en la materia (archivo excel 11446 bytes)
Fotos e Imagenes Free
Otros sitios de imágenes (y/o video) pagos
Permiten descargar imagenes pero son pagos aunque suelen ofrecer una cantidad X de descargas gratis es preciso registrarse.
Validadores HTML5 y CSS3
Performance
- https://testmysite.thinkwithgoogle.com Ya no está disponible este sitio de testing de Google: Think With Google sin embargo cuenta con información interesante sobre Performance y también SEO (Search Engine Optimization), aunque está muy vinculado al marketing y los servicios de la empresa;
- https://developers.google.com/speed/pagespeed/insights/ es el sitio oficial de Google;
- Lighthowse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web;
- http://www.webpagetest.org/ este sitio es el mejor para un desarrollador web ya que no sólo nos permite obtener información sobre performance, una sumamente importante: cuánto tiempo tarda en cargarse el primer byte o First Byte Load Time, sino también sobre cómo optimizar las imágenes jpg, estado de seguridad del sitio y además los headers del servidor web;
- https://gtmetrix.com/ este sitio sigue siendo interesante pero es similar a PageSpeed de Google, en realidad hoy en día está utilizando Lighthouse. Antes ofrecía la opción de testear el rendimiento o performance en base a las métricas de Yslow de Yahoo;
- http://tools.pingdom.com/fpt/ este sitio es otro muy utilizado;
Libros Electrónicos
Pendiente
Archivos Fuentes
Pendiente
Videos
Pendiente
Prácticos
Aúlicos
Pendiente
Proyecto
Pendiente