martes, noviembre 21
Integración multimedia en Auto Play Media Studio 4
También permite manejar archivos desde las carpetas del CD de distribución, copiar, borrar archivos de destino, como, por ejemplo, para hacer un instalador que copie los ficheros del CD-Rom al disco duro del usuario. Una exploración de las ACCIONES nos dará una buena visión de su alcance.
Aunque la versión de este software va en la 6.0, por su facilidad de uso, este tutorial se desarrollará en la versión 4.0. Las diferencias radican principalmente en cambios en la interfaz gráfica de usuario, y que en la versión 6 hay mayor disponibilidad de acciones.
La creación del Proyecto en AMS
Es posible seleccionar un Proyecto de los que vienen en la librería del programa, o crear uno en blanco. Se debe recordar colocar el nombre antes de seguir adelante. AMS creará una carpeta en "Mis Documentos" llamada "AutoPlay media projects" y dentro de ella, otra con el nombre del proyecto y , finalmente, otra dentro del proyecto, llamada "DISTRIBUTION", que es la que contiene los archivos finales de distribución.
En la imagen vemos la interfaz, con un despliegue del menú OBJECTS, que nos muestra los tipos de objetos que se pueden importar. Cada objeto importado va quedando en la ventana de objetos que está al lado izquierdo. El menú OBJETOS también está representado en una barra gráfica de herramientas en la parte superior.
Al importar, el objeto se coloca automáticamente en el área de diseño.
Podremos hacer doble CLICK para abrir las opciones del objeto.
Propiedades de los objetos en AMS
En este caso vemos las propiedades de un objeto MEDIA PLAYER OBJECT. El software se vale del sistema operativo Windows para modificar los atributos. COmo Media Player es parte del sistema operativo no habrá problemas de compatibilidad del video si se usan los códecs estándard de video. (Vea la sección de VIDEO en este mismo sitio)
Para el caso de el video, es posible encontrar las acciones apropiadas en la pestaña de Acciones, bajo el nombre de MEDIA PLAYER OBJECT. Por ejemplo, podremos hacer que un video se vea en pantalla completa si desde esta ventana se la ha dado el "permiso" ncesario en la opción ADVANCED OPTIONS, y luego en las acciones se programa dicha acción.
Atributos de los objetos en AMS
En la peastaña de ATTRIBUTES, es posible manejar el tamaño en pixeles, bloquear la posiciòn y colocar un nombre (NAME) para poder identificar el objeto en la pestaña de ACCIONES.
La casilla TOOLTIP TEXT, es la correspondiente al nombre que presentará el objeto al colocar el mouse sobre él por parte del usuario final.
Acciones aplicadas a objetos AMS
Puede insertar objetos de BITMAPS para ser utilizados como botones para navegar entre páginas. En la ventana de OBJETOS, abajo, hay una pestataña PAGES, al hacer CLICK DERECHO, se puede agregar páginas.
Las acciones se aplican habiendo seleccionado el objeto anteriormente. Es importante tener en cuenta el EVENTO que desencadenará la ACCIóN. Recuerde que un EVENTO en un producto multimedia, es un conjunto de eventualidades que ocurren para que se desarrolle una acción, bien sea por parte del usuario o el producto multimedia mismo.
En este caso, el objeto es el MEDIA PLAYER OBJECT, y el evento seleccinado es "On End of Stream" que significa, "En caso de terminar". Podría aplicar una acción de ir a otra página del mismo producto, abrir una URl de internet, salir de la aplicación, etc.
Investigue que hace cada una de las acciones .
Configurar el Proyecto emn AMS
El proyecto se configura mediante el menú PROJECT, en esta ventana tenemos un ejemplo de REQUERIMIENTO del Flash Player, el software que permite ver archivos de Flash.
La casilla de INFORMACIO /DOWNLOAD, es la dirección desde donde el usuario puede copiar el instalador.
La manera como se programa esta casilla en el ejemplo, muestra a %SrcDir%\instalador.exe que significa algo así como: Directorio de origen\archivo que instalará el flash player.
Para dicho caso, se coloca el instaldor en la carpeta DISTRIBUTION ya que esa es la raiz del CD que se grabará para distribuir a los usuarios finales. SrcDir, significa que buscará el instalador en la carpeta de origen señalada.
Configurar el Proyecto para finalizarlo en AMS
En la pestaña BUILD (construir) vemos señalado OUTPUT, que es el nombre de la aplicación que se ejecutará automáticamente, puede cambiar el nombre.
DATA SUPPORT, es el nombre de la carpeta donde AMS copia los archivos ensamblados, dicha carpeta va dentro de la carpeta DISTRIBUTION.
AUTORUN.INF es la sección donde decidimos si el CD-Rom será autoejecutable o no.
En la pestaña GENERAL Y CONFIGURATIONS están las opciones para hacer BORDES TRANSPARENTES, colocar ICONOS, tamaño de la presentación, etc.
Distribución final, Grabar en CD-ROM un proyecto de Autoplay Media Studio 4.0
Los archivos de la carpeta DISTRIBUTION se graban en la RAIZ del CD-Rom, no grabe la carpeta si no lo que va dentro de ella.
Para finalizar el proyecto se ua el MENU BUILD.
viernes, septiembre 15
Del Diseño de Información al Diseño de Presentación
Ilustración de MC Escher . Escher se caracterizaba por proponer un espacioEn el diseño gráfico existe el concepto de Diagramación, que es la distribución ordenada de elementos comunicativos en un plano, de acuerdo con tres grandes parámetros:irreal en sus composiciones.
Repetición. Modulación. y Comunicación.
Repetición:
Esta es la pantalla principal del sitio Vitaminliving.com el cual se destaca por su sencillez y pulcritud en color y formas. Responde a la regla de diseño que dice: "Cuando menos es más" que pretende dar a enteder que no por excederse en recursos se logran más incentivos en la comunicación.
Así como en los libros, revistas y otras publicaciones impresas existen elementos que se repiten en las páginas (números de página, secciones , etc), al diseñar sobre pantalla, los debemos tener en cuenta, estos pueden ser íconos, botones, avisos, menús y otros elementos que siempre se consideran importantes para la navegación por parte del usuario.
En las pantallas anteriores vemos como los elementos compositivos se repiten en las diferentes páginas. Estos elementos se referencian no solo por la forma, sino también por el color.
El usuario espera poder encontrar fácilmente los accesos a la información, y esto se logra no cambiando de lugar de disposición los elementos compositivos. Esta ayuda hace más amena la navegación por el producto multimedia, elimina procesos de reaprendizaje de cómo usar un producto y hace sentir "inteligente" a la persona que usa un producto. "El que no se equivoca es mejor usuario", entonces, depende , en gran parte de nosotros los diseñadores de productos multimedia, el hacer que las personas aprendan, se diviertan y usen mejor nuestros productos.
Modulación o Composición.
La modulación y repetición van íntimamente ligadas a la Comunicación. La modulación se conoce como una repetición de figuras o patrones similares o idénticos en un plano.
Es Estricta cuando se repiten las figuras y se repiten espacios iguales , por ejemplo M C Escher utilizaba mucho este recurso en sus trabajos.
Para más información ver: http://www.cs.technion.ac.il/
~gotsman/Escher/Html/lithographs.html
Es Variada si los elementos dentro de dicho plano se cambian de posición a lo largo del trabajo, para no crear monotonía en el diseño gráfico.
La modulación es, entonces, la distribución de la superficie donde se va a comunicar, en pequeños planos para luego en ellos, colocar nuestros elementos compositivos y comunicativos: Fotos, imágenes, videos, textos, botones, etc.
La modulación puede ser hecha a partir de conceptos como el de la Proporción Aurea, la simetría , la asimetrías.
La proporción Áurea
Luca Paccioli, matemático del renacimiento la llamaba la divina proporción, Leonardo Da Vinci sección áurea y Johannes Kepler astrónomo alemán la consideraba que era una de las dos cosas perfectas junto al teorema de Pitágoras, después cayo en el olvido, hasta que fué redescubierto por el alemán Zeysing en 1850.
A lo largo de la historia de las artes visuales, se han formulado diferentes teorías sobre la composición.
Platón decía que es imposible combinar bien dos cosas sin una tercera, hace falta una relación entre ellas que los ensamble, la mejor ligazón para esta relación es el todo. La suma de las partes como todo es la más perfecta relación de proporción.
Vitruvio acepta el mismo principio pero dice que la simetría consiste en el acuerdo de medidas entre los diversos elementos de la obra y estos con el conjunto, ideó una fórmula matemática, para la división del espacio dentro de un dibujo, conocida como la sección áurea, y se basaba en una proporción dada entre los lados mas largos y los más cortos de un rectángulo. Dicha simetría está regida por un modulo o canon común: que es el número.
http://www.geocities.com/ResearchTriangle/
Thinktank/4492/noticias/la_proporcion_aurea.htm
La proporción aurea consiste en una serie de líneas diagonales partiendo de las bases un cuadrado, que al entrecruzarse, forman las esquinas de un rectángulo . A ese rectángulo se llama rectángulo áureo. Los módulos que provienen de esa manera de distribuir el espacio, reciben el nombre de Composición áurea.
La regla de oro, como también se conoce, expresada gráficamente es la siguiente:
En las composiciones anteriores, de los Diseñadores Gráficos colombianos Carlos Andrés Torres y Victoria Ducuara, vemos claramente la composición áurea. Estas pueden ser las bases para una diagramación de las diferentes pantallas de un producto multimedia.
Para saber más sobre este tema:
Explicación teórica
http://www.geocities.com/ResearchTriangle/
Thinktank/4492/noticias/la_proporcion_aurea.htm
http://www.mailxmail.com/curso/
informatica/diseno2/capitulo6.htm
Explicación matemática
http://centros5.pntic.mec.es/ies.victoria.kent/
Rincon-C/Curiosid/Rc-25/RC-25.htm
http://www.goldenratio.com.ar/
index.php?msg=2006-09-15+06%3A42%3A58
Oras maneras de componer el espacio, como son la simetría y la asimetría (entre otras) son usadas regularmente por los diseñadores. Al parecer, la simetría es canon de belleza que la percepción humana disfruta más que otro tipo de composicón. Igual que la composición aurea
ya que es el tipo de modulaciones más presentes en la naturaleza.
Basados en la espiral natural del Nautilus, se descubrió la existencia de una proporción natural en los seres vivos de la naturaleza. Por esta razón, también se le denomina Divina Proporción, ya que está dada en la evolución natural, como si fuera dictada por un ser divino o superior.
Un artículo sobre composición Simétrica
http://www.desarrolloweb.com/articulos/1424.php
Comunicación.
Es la parte del diseño gráfico de un pieza multimedia (y otras, por supuesto, que no son multimedia como revistas y periódicos) que tiene que ver con la capacidad de un producto de solucionar un determinado problema de comunicación, como podría ser la enseñanaza, diversión o entretenimiento.
El diseñador estará a cargo de hacer posible que esta función se cumpla, ya que, a diferencia de las artes plásticas, queremos generar una respuesta a un problema y no una inquietud como a veces sucede con las artes visuales plásticas, donde los contenidos no necesariamente responden preguntas sino que, más bien, las generan.
La comunicación está ligada a las funciones repetitivas y modulativas ya que sin ellas sería imposible comunicar acertadamente. Suponga una página que por su complejidad en diseño no de acceso fácil a los contenidos.
Ventajas
Aplicar estos tres conceptos al diseño nos da claras ventajas :
- No tener que hacer mucho trabajo de creación. La repeteción de elementos además de mejorar la comunicación de la pieza, elimina la necesidad de crear pantallas diferentes cada vez. Esto supone economía, estética y rapidez.
- Beneficia al usuario
- Beneficia al diseñador
- No es necesario el uso excesivo de tecnologías que solo acomplejan el proceso de diseño. Por ejemplo, el uso de efectos de flash, podría dar al traste con la información.
martes, septiembre 5
Organización de la información
Organizar no es simplemente organizar por categorías. El diseño del producto multimedia incluye preguntas como:
- Prioridades del material
-Lo que necesita saber el público sobre dicho material
-Qué se persigue con la información.
"Muchas veces tendremos que desechar material "bonito" en aras de la comunicación. no por bonito siempre sirve".
Las tareas hechas hasta el momento con la definición de la información, nos han ayudado a definir la información, pero debemos hacernos cuestionamientos tales como:
-¿Cómo convertirla en interfaz?
-¿Cómo saber de qué manera usarán mi producto los usuarios?
-Temas con prioridad para el usuario.
- Tipos de acceso, vínculos y control quiere y necesita el usuario.
Las preguntas anteriores, simpre amrradas del concepto de información que tenemos como objetivo: Enseñar, divertir, recordar, promocionar, etc.
Estructuración, el uso de la Simplicidad.
Una vez se empiece a reunir la información en grupos y subgrupos, nos damos cuenta de que generalmente existen categorías basadas en:
- Tema o asunto
- Tamaño o escala
- Ubicación geográfica
- Secuencia histórica
- Secuencia narrativa
Ejemplo: SI vamos a convertir un manual de empleados o uin informe anual de un empresa, es posible que ya esté muy bien categorizado y jerarquizado (niveles de importancia de cada grupo), pero se debe pensar también en proporcionar links directos a temas, búsqueda del contenido, reorganizar el contenido para un mejor acceso y funcionamiento.
Existen métodos tales como la
1. Prueba Heurística o por criterios. Es la realizada por evaluadores especializados a partir de principios establecidos por la disciplina de la IPO/HCI. Esta evaluación detecta aproximadamente el 42% de los problemas graves de diseño y el 32% de los problemas menores, dependiendo del número de evaluadores que revisen el sitio. Posteriormente se recomienda realizar un test de usuarios para completar la evaluación.
Mayor información de este tipo de pruebas en Ainda.info
2. Test de usuarios. A través de la observación y registro del comportamiento de los usuarios en tareas previamente encomendadas, se extrae la información sobre la usabilidad de un sitio web. Es una técnica que complementa perfectamente a la evaluación por criterios.
3. Evaluación a través de simulación cognitiva (cognitive walkthrough). En ella se simulan detalladamente y paso a paso todos los procesos de uso (toma de decisiones, resolución de problemas, etc.) por un usuario. Una variante de esta es la simulación por equipo multidisciplinar (pluralistic walkthrough), en la que un grupo compuesto por usuarios, programadores y profesionales de IPO/HCI discuten cada uno de los elementos del sitio.
4. Evaluación de la usabilidad intercultural. Evalúa la adecuación de los contenidos, símbolos y estructuras de la información en el contexto cultural del usuario objetivo.
5. Evaluación de la Accesibilidad. En esta evaluación se comprueba la adecuación del sitio web a su uso por parte de discapacitados.
Más información en http://www.ainda.info/tipos_evaluacion.html
Ejercicio de organización.
Esto se logra creando unas tarjetas con los temas y después agrupándolas manualmente.
1. Haga una lista de todas las categorías de contenido posibles
No se preocupe de si están o no organizadas, si son grandes o pequeñas, después se organizarán.
2. Haga una agrupación temática
Serán los temas de nivel superior o lo que los usuarios verán primero. De esa lista pueden salir temas secundarios, los que se harán en un segundo paso. No es necesario hacer un tercer nivel ya que eso demanda mucho trabajo y detalle no necesario.3. Redefina grupos temáticos
Habrá temas que se vinculen a varias categorías, nos daremos cuenta de parte de nuestro trabajo en diseño también será crear una categoría si hace falta, o desechar una que se repita, etc.Ejemplo:
Lista principal:
Sueldo | beneficios médicos |
Opciones de inverisón | maternidad |
vacaciones | excendencias o ganancias ocasionales |
año sabático | críticas |
gimnsaio | despido |
plan de jubilación | saludos |
primas | incapacidades laborales |
política laboral | politicas de incapacidades laboral |
ética | |
4. Organizar por grupos dentro de la estructura
En la tabla siguiente vemos como esa información está organizada de una manera coherente y no simplemente en una lista con elementos uno tras de otro:Su tiempo | Su dinero | Su salud | Su trabajo |
horas de trabajo | sueldo | beneficios médicos | política de incapacidad |
vacaciones | primas | maternidad | política laboral |
año sabático | opciones de inversión | gimnasio | ética |
excedencias | jubilación | accidentes laborales | |
préstamos | seguro de incapacidad | crítica | |
despido |
El tema de incapacidad, maternidad podría cruzarse al momento de acceder a la información ya que uno es de salud y otro es de trabajo, pero tienen que ver el uno con el otro.
Los 4 grupos principales ya dan una mejor idea de organización, estructura y por lo tanto de navegación.
martes, agosto 22
Tutoriales de After Effects 6.5
AyatoWeb.com (en inglés)
After effects Tutorial (7.0) (en inglés)
Ejercicio básico (en Inglés)
Metáforas visuales
Con textos del artículo Semiótica y Retórica Visual Aplicada al diseño de Interfases: La Metáfora como elemento de Navegación. http://nolimit-studio.com/tesis/
Interrogantes (http://nolimit-studio.com/tesis/)
- ¿De qué manera podemos diseñar elementos gráficos para una interfaz que al usuario le resulten familiares e intuitivos?
- ¿Qué conceptos del diseño de objetos y señalizaciones reales pueden ser transportadas a un sistema de señalización virtual?
- ¿Comó reducir la ambigüedad en la interpretación de los signos gráficos?
Hipótesis
- Una interface confusa hace que el usuario pierda interés en utilizarla, de tener varias opciones elegirá aquella que le resulte más clara y sencilla de usar. Si por el contrario la interfaz está diseñada no sólo para ser fácil de usar sino además para guiar al usuario de forma amigable esto se traducirá en una mejora de comunicación entre el producto y el usuario.
- El uso de metáforas visuales ayudará al usuario a comprender mejor el funcionamiento de las interfaces ya que hará una conexión mental entre los objetos físicos que ya está acostumbrado a usar.
- Una interface gráfica tiene como función servir de mediador entre las aplicaciones y las personas que las usan, nunca deben tener un rol protágonico que opaque la importancia mayor del contenido.
Definición de Metáforas visuales
- Una metáfora es una figura del lenguaje donde se realiza una comparación entre dos objetos que no tienene ninguna relación aparente .
Un ejemplo concocido es la frase “El tiempo es oro” donde se transfieren las características de la palabra “oro” (valioso, escaso, preciado) a la palabra “tiempo” para dar a entender su valor.
Originalmente metáfora es una palabra griega que significaba transferír . Su etimología viene de meta que significa “cambio” y pherein que significa “llevar o trasladar”. Asi, la palabra Metáfora tiene a su vez un significado metáforico: “llevar o transferir un significado de una cosa a otra”
Las metaforas visuales funcionan de una manera similar, se sustituye un mensaje complejo mediante una imágen más simple pero evocatíva que le transfiere a éste su significado. Por ejemplo cuando una empresa que produce jugos de frutas enlatados le pone a su producto una marca con un pictográma representando a un árbol está pretendiendo sustituír en la mente del receptor las características del producto (enlatado, industrializado, producido en serie etc.) por las del árbol (naturaleza,frescura,saludable).
Uso de metáforas visuales en interfaces gráficas de usuario
La necesidad de interfaces más intuitívas
Una de las cosas que resultan obvias cuando uno hace una prueba de usabilidad — ya sea que esté uno probando sitios web, software o electrodomésticos— es la gran cantidad de gente que usa las cosas sin saber en realidad como funcionan o con ideas completamente erroneas acera de su funcionamiento.
Muy poca gente se toma el tiempo de leer instrucciones.
En su lugar el usuario avanza, experimenta, haciendo historias, vagamente plausibles acerca de qué qué hace y por qué funciona.
Para el usuario no es relevante saber como funcionan las cosas, en tanto que pueda usarla.
No es un problema de inteligencia sino de falta de interés.
Si logran hacer que algo funcione, no importa que tan mal lo haga, no buscarán otra manera de hacerlo.
Si los usuarios entienden, hay entonces una mejor oportunidad de que encuentren lo que buscan y cumplán sus objetivos, lo que es bueno tanto para el usuario como para el proveedor del servicio. Ademas, el usuario se sentirá mas inteligente y en control cuando use nuestro sitio, lo que garantizará su regreso.
¿Por qué usar metáforas visuales en Interfaces Gráficas de Usuario?
Para poder interactuar efectivamente con una aplicación es importante para los usuarios obtener un modelo cognitivo apropiado y relacionado a esa aplicación (.
Una manera simple de presentarle al usuario una funcion abstracta dentro de la funcionalidad de una aplicación es estableciendo una comparación entre esa funcionalidad y un objeto tangible del mundo real con el que estè familiarizado. Esto se logra mediante el uso de metáforas.Las metáforas contenidas en la interfaz de usuario final de un aplicación son herramientas poderosas para el desarollo de modelos cognitivos y conceptuales.
Muchas de los lenguajes de las culturas antiguas eran visuales o ideográficos al menos en parte. Tomemos por ejemplo los jeroglíficos egipcios, los pictogramas mayas y la escritura china son todos pro necesidad un tipo de atajos visuales.
La clave de estos lenguajes era representar visualmente solo la cantidad necesaria para sugerir el objeto en cuestión. Lo que significa que mucha de la responsabilidad de completar los detalles faltantes reside en el lector, aunque este esfuerzo de descifrado se vuelve innecesario con el tiempo al acostumbrarse éste a saltar (mentalmente) de la imágen a la idea .
En este contexto, una metáfora es el uso deuna idea u objeto en lugar de otro para sugerir una similitud.
- Una metáfora visual es un ideográma que representa visualmente esa idea
abstracta. La importancia de las metáforas reside en su habilidad para iniciar
una transferencia cognitiva entre un dominio del conocimiento familiar hacia
otro menos familiar.
Los íconos, ideogramas, ilustraciones y demás componentes gráficos que componen una interfaz de usuario deben tener una temática específica, por ejemplo, en los cortos de película que están publicados en el Blog, es claro que las metáforas visuales corresponden a una determinada temática.
Errores comunes en uso de metáforas visuales.
- Si los pictogramas o las metáforas requieren, para ser comprendidas la inclusión de un texto monosémico e inequívoco, hay que pensar si es preferible utilizar sólo la palabra en lugar de una metáfora ambigua y dotarle mejor de condiciones optimas de legibilidad .
- Otro error común es la falta de consistencia en el diseño de las metáforas a través de todo el sistema íconico, puesto que se toman metáforas existentes de diveras fuentes que no siguen una misma línea estética en su diseño. Esto genera confusión y falta de identidad.
Recomendaciones para diseñar sistemas de metáforas para una interfaz.
Cuando existan metáforas estandarizadas, úselas. Si bien, no existen manuales internacionales con estandares establecidos, algunos estándares están surgiendo. Es bueno estár informado de como avanza la comunidad de diseño en éste sentido.
Cuando una metáfora es usada en varias aplicaciones, implementelas en la manera estándar. Es bueno tener conjuntos de íconos probados y examinados que se relacionen con determinadas metáforas partículaes listos para ser adaptados y reutilizados.
Use una metafora en toda su extensión. Una implementación incompleta puede llevarnos a confusión, frustración y el desarrollo de estructuras pobremente formadas.
Esto es claro sobre todo al usar sistemas metafóricos complejos como en el caso del escritorio, un elemento perteneciente a otro campo semántico — como una sartén, por ejemplo— creará confusión en cuanto a su uso y le restará seriedad a la aplicación.
Evite metáforas similares cuando uses multiples metáforas. Obviamente, metáforas similares están propensas a provocar confusión en situaciones donde se producen íconos que podrían ser igualmente aplicables a una u otra metáfora.
No use referencias alusivas a un lenguaje específico. Esto es especialmente importante al diseñar aplicaciones con alcance internacional como puede ser un sitio web. Por ejemplo, en inglés se utiliza la palabra home (casa) para designar a la página principal de un sitio, pero en otros idiomas se utiliza otra palabra para describirlas, en español por ejemplo, decímos portada, índice o simpelmente página principal.
Diseño de información - Definición del producto
Tareas críticas:
- Público
Seleccionar el público objetivo al que va dirigido el mensaje. Tener en cuenta si es para niños, adultos, ¿saben leer?, etc. Son consideraciones que aunque parecen innecesarias al final tienen que ver con el resultado de nuestro producto.
- Distribución
Es la manera como se distribuirá el mensaje. Esto es, por CD, DVD, VHS, Internet, dispositivos móviles, etc. Dependiendo de esta decisión, se tomará en cuenta la tecnología y software necesarios, así como el equipo humano que debe participar en el proyecto. - Software
Las CURVAS DE APRENDIZAJE deben ser tenidas en cuenta ya que se tomar decisiones erradas al interponer en proyectos, la utilización de software para el cual no se es experto o sobre el que se tienen espectativas diferentes al verdadero alcance del software. - Contenido
Se deben tener ideas varias e irlas consignando en apuntes para documentar el proyecto, bocetos visuales, ideas escritas sobre contenidos, metáforas, ilustración, etc.
Una vez recogidas las ideas principales, se recomienda pasar a definir el proyecto y NO a la confección propia de la pieza multimedial, ya que suelen haber muchos cambios y esto hace inoperante, y extenuante el trabajo en el proyecto.
Tener en cuenta por ejemplo, la realización de storyboards, guiones, antes del diseño. O lo que equivale a plantear el proyecto como tal en un documento escrito, tal como se describe en Propuesta de un proyecto Multimedia - Planificar el proyecto
La planificación tiene que ver con fechas de entrega de cada uan de las partes del proyecto, la realización de guiones, storys y demás material gráfico y textual de refrencia para ayudar al cliente a comprender el trabajo que se le entregará así como al equipo de trabajo, en lo que se deberá desarrollar de acuerdo al plan de fechas. - Organizar el Contenido
Definir los objetivos del producto, nos ayuda seleccionar los demás items del desarrollo del trabajo: Video, animación, ilustración, programas, ¿QUé será la mejor opción para comunicar mi proyecto?. - Diagrama de flujo del contenido
Los Diagramas de Flujo nos ayudan a entender cómo se va a organizar la información del proyecto, que se enlaza con qué, que contenidos van a tener las secciones . Nos dan una visual de como organizar ETIQUETAS de botones, que nombres deben tener, y la profundidad de los CLICKS en un producto interactivo, que generalmente no debe ser más de 2.
Ayudarían a decidir, por ejemplo el uso de pestañas, navegación cruzada, lineal, horizontal, vertical (temas que estudiaremos más adelante).
jueves, agosto 10
Composición con Tipografia
Al crear la composición, se ha insrtado un SOLIDO desde el menú LAYER/NEW SOLID. Se debe tener en cuenta que la tecla MAYUSCULAs del computador bloquea la visual del área de trabajo, representada por un REBORDE rojo en dicha ventana.
Efecto de texto en un sólido
Los efectos de TEXTO quedan ubicados en la capa, al hacer doble click o pulsar la tecla F3, se abre la ventana correspondiente al panel de control del efecto. Para visualizar el EFECTO en la linea de tiempo, en el nombre de la CAPA, se pulsa sobre el pequeño triángulo al lado de dicho nombre.
Panel de control de efectos
Desde dicho panel, abierto con F3, o una vez colocado el efecto desde el menú EFECT, es posible insertar un FOTOGRAMA CLAVE (KEYFRAME), el cual está representado por un ICONO de forma redonda a manera de un CRONOMETRO, que al ser pulsado, inserta el KEYFRAME. La marca que contiene un número corresponde a la posición X, Y, del objeto en la ventana de composición.
En la ventana de TIME CONTROL (menú VIEW) aparece al final un ICONO de avance con tres lineas anteriores. Sirve para RENDERIZAR en memoria RAM una previsualización del trabajo. La previsualización se marca con una linea de color verde en el TIMELINE, también se acciona con la tecla "0" (cero).
Agrupar capas para crear una PRECOMPOSICION
En la imagen vemos que se han agrupado dos capas, seleccionándolas al tiempo, y aplicándoles la acción PRECOMPOSE del menú layer. Esto, para quienes manejan Flash, equivale en cierta forma a crear un MovieClip, que pasa a ser para el lenguaje de After Effects, una COMPOSICION. Para editar las capas precompuestas se escoje la pestaña en la linea de tiempo o se hace doble click en el nombre respectiovo de la ventana de archivos del proyecto.
Enmascarar una capa con otra.
En este caso, le asignamos a la capa del texto la función BLENDING MODE/STENCIL ALPHA, con ello la capa que está abajo, quedará inmersa dentro del texto.
Aplicar un efecto
Para el ejemplo se asigno un DIRECTIONAL BLUR, en diferentes fotogramas pra dar la sensación de movimiento.
Asignar Tridimensionalidad en AE.
Aunque After Efects no es un programa de 3D propiamente dicho, si puede simular la tridimensionalidad. A las Capas que queremos sean TRIDIMENSIONALES, les asignamos la propiedad desde el menu LAYER/3D LAYER. Fíjense en la representación de un CUBO en el TIMELINE al lado derecho del nombre de la capa.
Una Capa 3D puede ser visualizada desde varios puntos de vista . TOP, LEFT, RIGHT, FRONT, BOTTOM, CUSTOM VIEW1,2 Y 3.
Una capa 3D puede tener propiedades de aceptar SOMBRAS (SHADOWS) si se activan desde la spropiedades de la capa (triángulo pequeño al lado izquierdo del nombre de la capa).
Vista auxiliar
Asignar Luces las capas 3D
Desde el menu LAYER/NEW/LIGTH, seleccionamos primero una luz AMBIENT, a un 80% de su intensidad. Seguidamente, iniciamos una nueva LUZ tipo SPOT desde dicho menú también.
Esta LUZ (SPOT) es la encargada de generar las sombras sobre los objetos a donde se dirija.
En la ilustración vemos que para que las sombras se visualicen, debemos haber ACTIVADO las opciones CAST SHADOWS (aceptar sombras) , en cada una de las capas: LUZ SPOT, la capa de la transparencia y el fondo. y TODAS las capas deben ser 3D LAYER.
Posición de las capas en la Línea de tiempo
miércoles, agosto 9
miércoles, agosto 2
Códecs y formatos de Video
Es importante saber que tipo de archivo (formato) y con qué CODEC se debe publicar nuestro trabajo de video.
Formatos de Video
Introducción
VHS, U-matic, Betacam, High 8, MiniDV, CD o DVD, FLash Video, Mov, Quicktime, Div X Es muy fácil importar y exportar video mediante RCA, Svideo, Firewire, para guardarlo en cualquier formato físico como archivo de nuestro trabajo. Se debe tener en cuenta que de acuerdo con la manera como guardemos nuestro trabajo, es decir, en qué formato y códec, podemos hacer que la calidad de las imágenes pierdan o no calidad.
Este link nos lleva a una Información importante sobre el video en el ámbito profesional.
Aunque el codec de video digital Divx es popular por su alta tasa de compresión, no es el más acertado para editar video, si queremos que nuestras composiciones se vean en un lector de DVD común o que tengamos absoluto control sobre la compresión y no depender de un único grupo desarroyadora del códec, usaremos MPEG-1 ó MPEG-2, en él , en un CD de 700 MB podemos grabar 80~100 minutos y hasta más de 120 con una compresión óptima, y con muy buena calidad.
Formatos
Un formato de video digital, es la manera en que se guardan los datos en el fichero, esta forma puede cumplir diferentes requisitos según el uso para el que este diseñado, mientras que el códec es la compresión algorítimica a la que se ha visto sometido el contenido del formato de video digital. Metafóricamente hablando, el armário es el formato, y la manera en que coloco la ropa dentro es el códec.
De esta manera, es muy posible que el mismo códec este insertado en diferentes formatos de video. Es decir: podemos encontrar compresión MPEG en AVI, lo mismo que un QuickTime (mov), e igual, codecs DIVX pueden ser usado tanto en AVi como en MOV.
Formatos más conocidosAVI y AVI 2.0
El formato AVI (Audio Video Interleave) tiene un funcionamiento muy simple, pues almacena la información por capas, guardando una capa de video seguida por una de audio. Sus codecs están desarrollados como controladores para ACM (Audio Compression Manager) y VCM (Video Compression Manager), y también pueden ser usados por algunas otras arquitecturas, incluidas DirectShow y Windows Media.
Así pues, ciñéndonos a la realidad, sólo existen dos tipos generales de AVI, Los basados en Video for Windows (los primeros en aparecer) y los basados en DirectShow (originalmente ActiveMovie). Y como hemos dicho, un AVI no es más que un formato de archivo que puede guardar datos en su interior codificados de diversas formas y con la ayuda de diversos codecs que aplican diversos factores de compresión, aunque para liar la cosa aún más si cabe, también existe la posibilidad de almacenar los ficheros en un formato AVI "raw" o crudo, es decir, sin compresión.
Más informacion sobre AVI:
http://www.imagendv.com/tutorial/fiche_avi/fiche_avi.htm
http://conganat.uninet.edu/IICVHAP/comunic/008/avi.htm
Ya aplicaciones como Encore-DVD y Premiere, pueden manejar WMV de buena calidad para proyectos de DVD.
Más información: http://www.microsoft.com/windows/windowsmedia/es/http://www.lavanguardia.es/cgi-bin/noticialvd.pl?noticia=mediaplayer&seccion=software
Real Video [Visitar website(8)]
Real en los pasados años ha sido muy utilizado para streaming de audio en diversos medios. También tiene una propuesta para video llamada Real Video. Requiere de su propio player que es el Real Player (Recientemente fue lanzado el Real One) y para hacer streaming requiere del Real Server. En el sitio de Real también hay información para convertir archivos .avi a este formato. Real siempre tiene una versión simple y limitada de sus productos y una profesional que debe ser comprada.
Personalmente, no uso Real en ningún proyecto ya que considero muy agresiva la campaña de introducción del formato en los medios electrónicos. Esto es, Real Player pone funcionamientos a medias en sus productos y trata de obligar a los usuarios a comprar sus players para obtener una supuesta mejor "calidad" en el audio y video.Real Player deja ver DVD a medio volumen, colores opacos en su versión "Free" e insita a mejorar, comprando. HAy muchas y mejores alternativas en la web como el Video Lan que puede leer virtualmente cualquier video, incluso uno dañado o inconcluso.
Más información: http://conganat.uninet.edu/IICVHAP/comunic/008/realvid.htm (9)Apple Quicktime [Visitar website]
Apple también tiene una interesante opción nativa de los sistemas Mac. Sus archivos .mov requieren de un player especial que es el Quicktime player para visualizarlos. Este player tiene una versión sencilla gratuita y una versión profesional que entre otros permite realizar videos en dicho formato y editar algunas cualidades de los mismos.
Ofrece dos alternativas de servidores web. El Darwind Streaming Server y el Quicktime Server, ambos para plataformas Mac. Su codec es muy utilizado para presentar películas cortas y previews de los últimos lanzamientos de hollywood por su mejor calidad, aunque el tamaño es más pesado que otros formatos. En el sitio de Quicktime hay una amplia galería de cortos y videos para explorar.
El formato Quick Time puede albergar diferentes tipos de compresion o códecs como Animation, mpg4, DV para NTSC, DV PAL.
En proyectos web y CD es muy utilizado el Sorenson Video 3. Aunque últimamente, se usa tambien el mpg4, se debe tener cuidado al distribuir nuestro trabajo, ya que la mayoría de players de QuickTime deben ser actualizados vía web y los usuarios no tienen mucha afinidad esos procesos.
Más información:
http://www.lavanguardia.es/cgi-bin/noticialvd.pl?noticia=quicktime&seccion=software
(11)http://www.espanol.lycos.com/webmonkey/multimedia/quicktime/leccion1.html (12)
Códecs más conocidos
No comprimido
No es habitual procesar video no comprimido, debido al enorme ancho de banda necesario y a la cantidad de datos que se deben mover. Genera archivos GIGANTES en peso en kb que pueden llenar un disco duro en segundos.
DV
Con una cámara MiniDV y captura de video mediante el puerto firewire, el códec es el DV, una vez terminada la captura se puede comprimir como quiera. Seguramente se pueda capturar directamente comprimido, pero se verá afectada la calidad final, es decir, lo mejor es capturar con códec DV.
Dos horas de video DV con calidad similar a la del DVD, ronda cerca de los 15Gbytes, destacar que este códec solo comprime el video, el audio lo trata sin comprimir.
Los programas como Premiere, DVD Pro, Premiere, After Efects, Final Cut, mueven este formato con facilidad.
MPEG
Ofrece tres ventajas : compatibilidad mundial, gran compresión y poca degradación de la imagen. El estándar no especifica cómo se debe hacer la compresión. Los diferentes fabricantes luchan para determinar el mejor algoritmo, manteniendo siempre la compatibilidad.
Un cadena MPEG se compone de tres capas: audio, video y una capa a nivel de sistema. Esta última incluye información sobre sincronización, tiempo, calidad , etc.
MPEG-1 : Establecido en 1991, se diseñó para introducir video en un CD-ROM. Por aquel entonces eran lentos, por lo que la velocidad de transferencia quedaba limitada a 1.5 Mbits y la resolución a 352x240. La calidad es similar al VHS. Se usa para videoconferencias, el CD-i, etc. Si es usado a mayor velocidad, es capaz de dar más calidad.
En este formato están grabados los VCD y superVCD, así mismo se usa el formato en multimedia en CD-ROm que deba poderse ejecutar desde el CD-Rom sin tener que copiar el archivo al disco duro.
MPEG-2 : Establecido en 1994 para ofrecer mayor calidad con mayor ancho de banda ( típicamente de 3 a 10 Mbits ). En esa banda, proporciona 720x486 pixels de resolución, es decir, calidad TV. Ofrece compatibilidad con MPEG-1.
Este formato es el utilizado en los DVD, se debe tener en cuenta que un archivo con extensión MPG o MPEG puede estar codificado como 1, 2, 3, 4. Aunque los programas de edición y composición de video pueden leer y editarlo, es de muy DIFICIL MANIPULACION y no se ACONSEJA por ningún motivo tratar de editar video en este formato.
MPEG-3 : Fue una propuesta de estándar para la TV de alta resolución, pero como se ha demostrado que MPEG-2 con mayor ancho de banda cumple con este cometido, se ha abandonado.
MPEG-4 : Está en discusión. Se trata de un formato de muy bajo ancho de banda y resolución de 176x144, pensado para videoconferencias sobre internet. Realmente está evolucionando mucho y hay fantásticos codificadores soft que dan una calidad semejante al MPEG-2 pero con mucho menor ancho de banda.
Es muy bueno y vale la pena indagar sobre su uso. También se le llama incorrectamente Mp4 a reproductores portátiles que cuentan con una pantalla capaz de reproducir videos e imágenes. Esto es en realidad una estrategia de marketing que intenta dar la sensación al consumidor de que un reproductor Mp4 es superior a un reproductor de Mp3 por la simple y lógica superioridad numérica del nombre del primero.
La mejor manera de producir archvios MPG1 es con un software llamado TMPEGEncoder
como la compresión mpg2 sólo se usa en DVD, y raramente se distribuye separada de ese medio, lo más aconsejable es usar software como Premiere que permite exportar con compresión mpg2 en archivos separados de audio (WAV) y video (M2V), esos dos tipos de archivo se importan después a la aplicación de autoría de DVD como Encore o TMPGenc DVD Author.
JPEG : Joint Photographic Experts Group . Como su nombre indica es un sistema de compresión de fotografías. Muchos de los sistemas de compresión de vídeo, tal como el M-JPEG ( motion JPEG ) Cinepak e Indeo, se basan en él. Consideran el vídeo como una sucesión de fotografias. MPEG introduce la noción de movimiento de una manera mucho más compleja y agresiva el el M-JPEG.
Más información sobre MPEG:
http://www.imagendv.com/mpeg.htm
http://www.tiramillas.net/videojuegos/guiautil/formatosvideo/formatosvideo.html
DivX ;) [Visitar website]
En estos días todo trata de compresión y el DivX es una gran alternativa para esta tarea. Con mucha gente trabajando en sus diferentes codecs el DivX se ha vuelto muy popular y estuvo bastante relacionado con los DVDs y su piratería, ya que con dicho formato mucha gente se dió a la tarea de pasar DVDs a CDs con una calidad aceptable de video.
Más información sobre DivX ;) http://www.maestrosdelweb.com/editorial/computacion/divx.asp
http://club.idecnet.com/~modegar/video/divx.htm
http://www.divx-digest.com/articles/divx_spa/
Para más información sobre otros códecs de video del estilo de DivX:
http://www.3ivx.com/
http://www.xvid.net/
Final
No se nombraron todos los que existen, ni están todos los que se merecen, pero ha valido la pena :-)
Este artícuo fue tomado de la página http://www.linuca.org/impresion.phtml?nIdNoticia=148
Las anotaciones en color azul, son apreciaciones del responsable del Blog.
<<====================================>>
Los estudiantes aportarán más contenido sobre este tema, visitando las páginas sugeridas y otras que sonsideren necesarias.
martes, agosto 1
Adobe After Effects 6.5 - Composición
Una composición es una colección de elementos importados o creados en AE, que pueden tener muchas propiedades, las cuales se manejan desde las CAPAS y el MENU EFFECTS.
Es importante que las medidas de la Comp. se ajusten a un determinado proyecto:
- 320 x 240 pix: Multimedia en CD -Rom
- 640 x 480 (486) . Televisión, video análogo, DVD
- 720 x 480 (486) DVD
- Mirar otros tamaños para cine, HDTV, etc.
- Tener en cuenta que los formatos sirven a diferentes regiones, por ejemplo NTCS y PAL.
- Tener en cuenta la forma de PIXEL, para mantener las proporciones de acuerdo al medio donde se difunda el video.
Adobe After Effects 6.5 - Herramientas
Todas estas ventana se abren desde le menú WINDOW.
- Ensaye con todas las opciones del menú WINDOW. Sobre todo con WORK SPACE, que es la opción que nos permite recuperar las ventans cuando las hayamos cerrado por equivocación.
Adobe After Effects 6.5 - Menú Layer
Adobe After Effects 6.5 - Sólidos
- Un SOLIDO, es un elemento primitivo en After Effects, con él podremos crear diferentes efectos.
- Es un rectángulo que se INSERTA desde el menú LAYER/NEW/SOLID.
- Recuerde dar un nombre al SOLIDO, es importante sobretodo en proyectos grandes donde la presencia de muchas capas no permite ubicar fácilmente los elementos.
- Note las capacidades de COLOR y TAMAÑO en las ventanas emergentes.
Adobe After Effects 6.5 - Capas
- Los Iconos al lado derecho sirven para verificar algunas propiedades (no las básicas)
- Para ver las propiedades básicas, haga click en la parte izquierda del nombre de la capa, justo en icono del triangulo pequeño, que apunta al nombre de la capa.
Adobe After Effects 6.5 - Capas y propiedades -Time Line
- Un elemento ARRASTRADO hacia el TIMELINE, tiene la opción de ser manipulado en sus PRPEDADES BÁSICAS.
- El NOMBRE DE LA CAPA tiene un ícono en su parte izquierda (un triángulo pequeño) , este ícono sirve para abrir las proipiedades de dicha capa.
- Capa propiedad también tiene dicho ícono.
- El ícono de CRONOMETRO al lado de la propiedad equivale a un KEYFRAME (piensen en F6 en Flash).
- Los KEYFRAMES se marcan como un ROMBO de color gris al lado derecho.
- La columna de los números, son los valores de las propiedades básicas de cada elemento en la capa. Las CAPAS se apilan una sobre la otra.
- Justo bajo los VALORES DE CAPA (Valores de las propiedades) hay un boton SWITCHES /MODES. Este botón intercambia entre los modos de capa. Como en Photoshop donde cada capa tiene un modo de transferirse sobre la otra.
- El ICONO de DOBLE TRIANGULO justo debajo de la linea roja (CABEZA LECTORA) en la parte de abajo, es un boton llamdo STRETCH, que sirve para modificar la duración de una línea de tiempo. Sirve para, por ejemplo, hacer una cámara lenta o una cámara en reversa si se le pone un valor negativo.
- La columna PARENT, nos da la oportunidad de VINCULAR una CAPA con OTRA, es decir, hacer que una capa sea HIJA de OTRA. De esa amnera, si modifico una propiedad de una capa PADRE, también modifico la propiedad en la capa HIJA.
Adobe After Effects 6.5 - Ventana de Proyecto
- Las carpetas de color amarillo representan los SOLIDOS que hemos elaborado anteriormente.
- Todos los objetos importados desde el menú FILE/IMPORT, se visualizan en esta ventana.
- Haga click en los íconos de la parte de abajao de dicha ventan para ejecutar búsquedas de los objetos, crear carpetas para agrupar objetos, crear una composición nueva, borrar elementos y ALT+CLICK sobre 8bpc para intercambair en visualización de 8 o 16 bits (Por ejemplo para cuando se trabajan degradados).
Adobe After Effects 6.5 - Paneles de control y Area de trabajo
- Debajo, el 50% representa el ZOOM,
- seguidamente está el AREA DE SEGURIDAD (similar a un punto de mira),
- el POLIGONO representa una MASCARA,
- sigue el CONTADOR DE TIEMPO, se puede hacer CLICK sobre el para editarlo;
- el ícono de la CAMRA FOTOGRAFICA, sirve para tomar impresiones en memoria RAM de un determinao momento de la composición,
- y el ícono de la PERSONA, para ver lo que esté en memoria RAM. Se usa principalmente a manera de un ONION SKIN.
- Las BARRAS de color, PERMITEN ver un determinado canal de color RGB;
- en el MENU DESPLEGABLE, vemos la calidad (en este caso QUARTER) se usa para hacer más fácil la edición , en FULL, por ejemplo, se usa más memoria RAM.
- El recuadro que sigue se utiliza para hacer una selección de la composición, esta selección es solamente para visualizar el área de trabajo.
- Por último, esta el ícono ajedrezado. NOs permite ver las transparencias o canla alfa de la composición.
Adobe After Effects 6.5 - Time Line
En esta pantalla se muestra, la parte de abajo, el TIMELINE, los números de la parte izquierda, en la columna, representan las propiedades básicas de los elementos presentes en las capas.
En la parte intermedia, justo debajo de la LINEA DE CABEZA LECTORA, los rombos representan los KEYFRAMES. Los KEYFRAMES modifican las propiedades básicas, los valores para efectos y se puede hacer DOBLE CLIK sobre ellos para modificar sus datos, o ARRASTRAR el mouse sobre los valores de la izquierda.
martes, julio 25
• Interacción
• Diseño de información
– Definición de producto
– Público y entorno
– Usuarios
– Opciones de desarrollo
– Materias primas
– Planificación
– Organización
– Diagramas de flujo
• Diseño de Interfaces de Usuario
– Orientación
– Mapa de imagen y metáfora
– Navegación
– Utilización
– Funciónalidad
– Guiones multimedia
• Diseño de presentación
– La imagen digital
– Compresión de datos
– Estilo gráfico y de comunicación
– Diseño y comunicación
– Prototipo
– Distribución
– Contratación, manejo del cliente
• Bibliografía
– Vaughan, Tay; Manual de referencia de Multimedia. McGrawHill.
– Kristof, Ray; Diseño Interactivo, Anaya Multimedia, Anaya.
– Rafols, Rafael; El diseño Audiovisual, GG Diseño.
– Información Internet
• Software de autoría
– Macromedia Director, Encore
– Macromedia Authorware
– Macromedia Flash
• Software de composición y edición
– Photoshop– Fireworks
– After Effects, Premiere
• Software de integración
– Zinc Loader
– Autoplay Media Studio
– Illuminatus Opus Pro
• Software auxiliar
– 3D, animación por plantillas, salvadores de pantalla, iconos, temas de escritorio, instaladores, grabación.
Integración multimedia
– Es la integración de diferentes medios dentro de un solo producto, haciéndolo interactivo.
– Fusiona varias materia primas en una interfaz utilizable.
– Al diseñar como un proceso, se divide el proyecto en tareas y cuestiones tangibles, para manejar todas las piezas de manera óptima.
– Es un proyecto de comunicación.
Bases de la integración
• Diseño de la Información
– ¿Qué es el producto?
• Planificación, Público, Contenido organización
• Diagrama de flujo
• Diseño de la Interacción
– ¿Cómo debe funcionar?
• Navegación, interacción, controles
• Guión
• Diseño de la Presentación
– Apariencia que debe tener
• Estilo, diseño de elementos del Guión
• Prototipo
este programa está basado en el libro DISEÑO INTERACTIVO, de Anaya Multimedia