GUIA DIDACTICA PARA DISEÑAR PORTAFOLIOS DIGITALES

“GUÍA DIDÁCTICA PARA DISEÑAR PORTAFOLIOS DIGITALES” PRESENTADA POR: ISABEL ALEJANDRA FLORES SÁNCHEZ JORGE ALBERTO MERINO MURCIA ANNA WALTER PORRAS

DE EL AD

N CE

IC A

OR LVAD SA

UNIVER SID

Guía realizada en el marco de Proceso de Graduación de los autores, Escuela de Artes, Universidad de El Salvador

TR O AMER

GUÍA PARA LA CREACIÓN DE PORTAFOLIOS DIGITALES

INDICE

GUÍA PARA LA CREACIÓN DE PORTAFOLIOS DIGITALES Créditos Introducción

6 i

Briefing Organigrama Sugerencias

10 11 11

Concepto creativo Muestra de proyectos Cuestiones técnicas Presentación

13 13 14 15

BRIEFING Y ORGANIGRAMA

FUNDAMENTOS DEL DISEÑO: CONCEPTUALIZACIÓN

DESARROLLO DEL PORTAFOLIO DIGITAL

Abrir software [Swish Max 2008] Configuración de la mesa de trabajo Velocidad de fotogramas Activar propiedad “detener” Fondo de la película Panel “guías” Preparación de contenidos Tareas Crear textos Interacción entre escenas Otro tipo de interactividad Animación de objetos Galería de imágenes Construcción de la galería de imágenes El pre cargador de contenido Glosario Tabla resumen de software adicional

17 17 18 18 18 18 21 23 24 27 31 32 35 38 47 52 56

CRÉDITOS GUÍA PARA LA CREACIÓN DE PORTAFOLIOS DIGITALES

Realizada en el marco de proceso de grado: “Guía para la elaboración de portafolios digitales”.

Escuela de Artes Facultad de Ciencias y Humanidades Universidad de El Salvador Elaborado por : Alejandra Flores Anna Walter Jorge Merino Bajo la asesoría de: Lic. Xenia Pérez Febrero, 2010

GUÍA PARA LA CREACIÓN DE PORTAFOLIOS DIGITALES

INTRODUCCIÓN. El diseño gráfico es una profesión construida al principio de los tiempos modernos. Por ende su reciente surgimiento desemboca en un acelerado progreso. Por otro lado, la tecnología dictamina el quehacer del diseñador gráfico, ya que por ello se desarrollan nuevos campos y medios de comunicación (como sucedió con el nacimiento de la televisión, la computación y el Internet), creándose nuevos fundamentos y software específicos.

Uno de los medios más novedosos son los medios digitales, que surgen como una manera de entretenimiento y abarcan diferentes canales de comunicación.

También la tecnología ha incidido en el aumento del mercado del diseño gráfico y la expansión de las agencias publicitarias a nivel mundial, reflejándose en un mundo de exigencias y competencia. Para poder empezar a brindar sus servicios, el diseñador gráfico debe presentarse de una manera interesante, como un distintivo claro de lo que puede percibirse dentro del mercado profesional. La herramienta estándar, efectiva y práctica de iniciarse y crecer como profesional de diseño y otros ámbitos, es el portafolio. Por su medio se proyectan el nivel y la calidad de trabajo.

Este proyecto se realizó en el marco del proceso de grado: “Guía didáctica para la elaboración de portafolios digitales”. El objetivo de esta guía es que funja como recurso didáctico para que los estudiantes, previo al egreso de la carrera, tengan el conocimiento ideal para realizar un portafolio efectivo y funcional de acuerdo a los parámetros de los mercados pertinentes.

i

GUÍA PARA LA CREACIÓN DE PORTAFOLIOS DIGITALES CONCEPTO DEL PORTAFOLIO DIGITAL.

distinguirse de otros en el campo competitivo.

El portafolio es una herramienta de recopilación de trabajos/proyectos que facilita información de desarrollo, aportaciones y logros alcanzados a lo largo de una carrera académica o profesional, definiendo el área o las áreas en las que se especializa. A la vez, muestra las capacidades, conocimientos, línea de trabajo, enfoque, estilo, entre otros, de la persona.

Puede ser presentado en diferentes formatos , tanto tradicionales (carpetas), que se refiere a los impresos; y digitales o electrónicos: archivo PDF, presentación de CD, demo reel en DVD, y sitios web.

FUNCIÓN DEL PORTAFOLIO DIGITAL El portafolio se utiliza como una vía de comunicación y exposición práctica, efectiva y portátil entre su autor y los receptores interesados.

CARACTERÍSTICAS DEL PORTAFOLIO DIGITAL Presenta información real de un estudiante o profesional y cubre diferentes campos laborales: arquitectura; fotografía; diseño gráfico, multimedia, ambiental, industrial y artesanal; artes plásticas, como: pintura, escultura, dibujo y cerámica.

Presenta una variada muestra académica y/o laboral, con una secuencia organizada y breve descripción, como un paquete gráfico unificado, sin dejar de mantener un enfoque unitario en la presentación.

La utilidad del portafolio se refleja en su fácil y ágil accesibilidad.

Proporcion la información necesaria para los diferentes entes según su propósito: docentes, potenciales empleadores, instituciones educativas, asesores, profesionales, galerías, entre otros.

Ya que cada portafolio requiere de un diferenciador conceptual y visual, su diseño debe ser único, creativo e innovador para

9

BRIEFING - ORGANIGRAMA Es una herramienta eficaz para presentar junto con la solicitud de admisión a un curso de postgrado, una beca, un concurso, una entrevista de trabajo o un cliente potencial.

efectiva. Por ende, el briefing sirve tanto para definir y establecer, como para delimitar.

Con el resultado se puede evaluar o autoevaluar de manera objetiva los puntos fuertes y logros alcanzados.

1. BRIEFING – ORGANIGRAMA. [Primera etapa] BRIEFING El briefing también es denominado programa de diseño. Es un documento escrito que recoge toda la información necesaria para que se pueda desarrollar correctamente un proyecto de diseño. Proporciona información sustancial de una empresa o marca sobre las que los del departamento de publicidad deben elaborar una campaña concreta.

Todo el tiempo que se dedique a redactar el contenido del briefing, de la forma más detallada posible, debe considerarse de gran utilidad, puesto que ahorrará tiempo en el desarrollo del proyecto y fomentará una creatividad bien orientada y

1.1 Esquema realizado por el grupo de investigación

10

BRIEFING - ORGANIGRAMA ORGANIGRAMA

Es una herramienta eficaz para presentar junto con la solicitud de admisión a un curso de postgrado, una beca, un concurso, una entrevista de trabajo o un cliente potencial.

Un organigrama es la representación gráfica de una estructura en donde se pone de manifiesto la relación formal existente entre las diversas unidades que lo integran. En este punto no se debe tratar de hacer guiones, animaciones, videos ni nada por el estilo.

SUGERENCIAS Las casillas por lo general se construyen con forma rectangular, para conservar el orden y la distribución de los elementos no dé lugar a confusiones posteriores.

Esta tarea comprende simplemente organizar el sistema de vínculos que tendrá el portafolio multimedia final. Por lo tanto se debe estable-

cer qué elementos contendrá cada una de las pantallas del mismo para luego decidir cómo se tendrá acceso a los mismos.

Las líneas o conectores deben ser claras y no mezclarse entre si.

11

BRIEFING - ORGANIGRAMA Cuando una pantalla contiene vínculos, en el organigrama, la primera debe resaltarse, de manera que se entienda que es la principal.

Si se construye un organigrama con demasiada información o con abreviaturas, es importante indicar al pie del organigrama el significado de cada uno de los elementos.

Se debe tener en cuenta que ningún organigrama tiene carácter definitivo, ya que estos sirven para analizar la estructura del portafolio, corregir errores y poder actualizarlo periódicamente.

12

FUNDAMENTOS DEL DISEÑO - CONCEPTUALIZACIÓN 2. FUNDAMENTOS DEL DISEÑO – CONCEPTUALIZACIÓN. [Basado en taller + ejemplos]

Con esta perspectiva se puede poner en evidencia la diferencia entre un diseñador ornamental y un comunicador.

A continuación se exponen varios puntos de cuatro temas importantes: concepto creativo, muestra, cuestiones técnicas y presentación.

Es necesario aclarar que lo expuesto a continuación no son reglas, más bien principios que se deben tomar en cuenta dependiendo de la intención y concepto del diseño del portafolio.

Es conveniente que el concepto resalte sobre la tendencia global tanto de los portafolios como del flujo gráfico que se manifiesta en la publicidad.

El diseñador puede optar entre un concepto sobre su persona o sobre su profesión. Generalmente en el rubro publicitario los componentes personales no interesan. Pero en el ámbito cultural y artístico estos componentes obtienen protagonismo.

CONCEPTO CREATIVO Es necesario que la calidad del concepto y de la imagen del portafolio sean congruentes con la de la muestra académica y/o laboral. El diseño del portafolio debe visualizarse como parte de la carpeta de trabajos. De esta manera una no debe superar a la otra.

MUESTRA DE PROYECTOS La recopilación de proyectos depende del área de trabajo al que el diseñador esté aplicando. Por ejemplo, para aplicar a una agencia es pertinente incluir diseños publicitarios, diseño editorial, fotografía y trabajo en el que se denote dirección de arte. Debe ser diferente al aplicar a una empresa editorial, en ese caso sería necesario mostrar diseños editoriales, fotografía e ilustraciones. Incluso, cuando el autor del portafolio tiene un estilo

Los gráficos del portafolio no deben ser decorativos, sino que deben respaldar el concepto medular del portafolio. El tema debe aterrizar en algo concreto. Generalmente las formas orgánicas resultan ser gráficos sin ningún fundamento conceptual.

13

DESARROLLO DEL PORTAFOLIO DIGITAL En cada uno de los proyectos es importante especificar qué cargo se tuvo. En el caso de tener clientes, resultaría convenientes enlistarlos o incluirlos en las fichas de los proyectos.

determinado, puede insistir en éste a lo largo del portafolio. Siempre y cuando haya un mercado necesitado del rubro y del estilo mostrado en los trabajos del portafolio, con una buena distribución de éste, el diseñador o artista cuenta con una forma efectiva de posicionarse entre la competencia.

Todo el trabajo que se incluya debe ser propio, en ningún caso se debe recurrir al plagio.

Se puede montar un portafolio versátil, pero más importante es mostrar trabajos singulares.

Es válido, y a veces de mucha ventaja, poner trabajo experimental o personal, a parte del académico y/o profesional. El proceso se puede mostrar a manera de ideas puramente lingüística, esquema o bocetos.

La muestra debe denotar la capacidad de síntesis que tiene el diseñador. De la misma manera, no debe ser muy largo, ni repetitivo.

No existe un parámetro para definir un orden estratégico de muestra de trabajos. Es factible ubicar los mejores trabajos al principio o se pueden intercalar los excepcionales con los regulares. Esta decisión debe depender del tiempo que tiene el receptor del portafolio.

CUESTIONES TÉCNICAS El portafolio debe estar apto para verse en Windows, Linux y Mac, de la misma manera, la tipografía no se debe deformar al no tenerla instalada en la computadora.

Es importante reflejar uniformidad en la calidad de los trabajos de la galería. No es necesario que refleje un alto nivel de creatividad, sino que sea agradable, que demuestre una buena dirección de fotografía y arte, buen manejo tipográfico, de forma y color, y una buena selección de materiales.

La galería debe ser de fácil navegabilidad. Otras especificaciones importantes son que incluyan el botón de cerrar ventana y la opción de silenciar la música, en el caso de que se presente el portafolio con audio.

14

DESARROLLO DEL PORTAFOLIO DIGITAL Si se utiliza imagen gráfica, las animaciones deben ser cortas y no muy exageradas. De lo contrario, es conveniente darle la opción al usuario de saltarse directamente al menú principal, a través de un botón de skip intro.

PRESENTACIÓN El disco compacto debe ir bien presentado en un empaque funcional.

El currículum no debe ir dentro de la presentación del portafolio. Puede ir impreso y anexado al disco compacto de la presentación del portafolio o puede estar como archivo digital al lado del archivo de la presentación del portafolio.

De haber una entrevista, se debe mostrar una actitud auténtica, y se debe tener en mente, que lo que buscan para los puestos laborales, a parte de habilidad y creatividad, es capacidad para trabajar en equipo. Esto se denota a través del lenguaje corporal.

15

DESARROLLO DEL PORTAFOLIO DIGITAL 3. DESARROLLO DEL PORTAFOLIO DIGITAL. [Swish Max 2008]

Posee la facilidad de utilizar código - panel “GUIÓN” - valiéndose de Java Script y Script de Swish, que es muy similar en sintaxis al Action Script de Flash. Además permite el dibujo vectorial con algunas limitantes, por lo que es recomendable utilizar otros programas para crear elementos gráficos y luego importarlos a Swish Max.

A continuación encontrarás paso a paso cómo realizar tu portafolio digital a través del programa operativo Swish Max. Dicho programa tiene como funciones especiales la creación de ambientes interactivos a través de animaciones y vinculación de objetos.

Las operaciones que veremos son básicas, por lo que se sugiere extender la investigación y practicar en

16

DESARROLLO DEL PORTAFOLIO DIGITAL CONFIGURACIÓN DE LA MESA DE TRABAJO

el entorno del software para tareas más complicadas. Hay diferentes accesos para tareas similares dentro de Swish Max. Las operaciones pueden ser realizadas desde donde se sientan más cómodos, teniendo como resultado exactamente lo mismo.

EN PANEL “PELÍCULA” Tamaño de mesa de trabajo.

[900x800px] Generalmente el tamaño de la mesa de trabajo está sujeta a las características del equipo o medio en el que se reproducirá el portafolio digital. Así, puede pensarse en una presentación a pantalla completa o en un encaje en pantalla contemplando los menús de navegación de un explorador Web. Lo mejor para cualquiera de los casos es realizar pruebas previas sobre diversos tamaños de mesa de trabajo reproducidos en diferentes medios finales.

ABRIR SOFTWARE [Swish Max 2008] El software genera un documento estándar al abrirlo. Las propiedades deben ser configuradas por el usuario, adaptando así las características del portafolio digital hacia lo que se pretende lograr al finalizar.

Se debe tener en cuenta el tipo de reproducción que se hará, el equipo que se usará y si habrá una tecnología auxiliar al realizar esta tarea.

Los colores aparecen nombrados en sistema RGB [Ejemplos, Negro: 0,0,0 Blanco: 255, 255, 255] De ser necesaria su traducción a otros sistemas, se recomienda el uso de softwares especializados como “Color Shemer” [Leer más en anexos de la guía en “Otras herramientas útiles para el desarrollo de portafolios digitales”] Swish Max trabaja colores en sistema RGB y hexadecimales.

17

DESARROLLO DEL PORTAFOLIO DIGITAL VELOCIDAD DE FOTOGRAMAS

EN EL PANEL “GUÍAS”

12 fotogramas / seg. La velocidad de fotogramas por segundo variará según la calidad de animación que queramos lograr. El valor por defecto del Swish Max 2008 es 12 fotogramas / seg. Aunque este valor podrá ser modificado según nuestras necesidades. Para un portafolio digital presentado en un CD, se puede utilizar en 24 o 30 fotogramas / Seg. Por otro lado, si su finalidad es la Web, será suficiente animar con el valor por defecto.

Activar propiedad: [mostrar reglas] Color de Guías: [Azul / bloqueadas] Ubicación de las guías con relación a la mesa de trabajo. [Horizontal / centro, vertical / centro, derecha 25 px., izquierda 25 px., arriba 25 px., abajo 25 px.]

Pueden utilizarse imágenes de fondo en Swish Max 2008, en nuestro caso utilizamos un archivo “.jpg” que fue trabajado en Photoshop Cs3 Extended de la siguiente manera:

ACTIVAR PROPIEDAD “DETENER” Detener reproducción al final. En algún momento sucederá que queramos ver cómo se comporta la interfaz de nuestro Portafolio Digital.

Es aquí donde muchos cometen el error de reproducir la animación sin colocar “detener” en la línea de tiempo. Por ello que se recomienda activar esta propiedad que aparece visible en el menú “PELÍCULA”.

FONDO DE LA PELÍCULA 0, 0, 0 “Negro”. Puede variarse a conveniencia seleccionando colores del sistema en el panel “COLOR”.

18

DESARROLLO DEL PORTAFOLIO DIGITAL Es importante crear líneas guías para definir el área destinada al menú de navegación, a los contenidos, logotipo y créditos. Además si hemos decidido colocar otra información, no está de más contemplarlo desde el principios.

La imagen original es una textura de “parquet” de 900x800 px. Puede optarse por utilizar imágenes que nosotros mismos hayamos tomado o descargarlas de bancos de imágenes en línea gratuitos.

Se crea otra capa nueva, aplicando un degradado radial blanco con opacidad 30%.

Existen otras posibilidades para crear luces en Photoshop.

Capa de ajuste “corrección selectiva”. La opción aparece en la ventana “CAPAS” de Photoshop, y permite hacer correcciones de color enfocándonos en el canal necesario.

19

DESARROLLO DEL PORTAFOLIO DIGITAL

En una nueva capa se aplica un degradado lineal de la parte superior e inferior, ambas hacia el centro, de negro a transparente. Esta herramienta se encuentra disponible en

La imagen deberá ser guardada como “.jpg”, es conveniente además, guardar el archivo editable en “.psd” por cualquier modificación futura.

el área de las herramientas.

Capa de ajuste “brillo y contraste”.

Esta opción permite acentuar la diferencia entre las luces y el resto de la imagen.

Finalmente aplicamos una capa de ajuste para convertir la imagen a blanco y negro. Se puede variar los valores hasta llegar a una escala de grises deseada, partiendo de la interpretación de los colores originales en grises realizada por Photoshop.

20

DESARROLLO DEL PORTAFOLIO DIGITAL

La imagen en “.jpg” resultante del proceso en Photoshop es importada a la mesa de trabajo de Swish Max 2008. Para ello se accede al menú

Preparación de contenidos

Existe una amplia gama de formas para realizar tareas en torno al material para un Portafolio Digital. A continuación se explica de manera básica los pasos a seguir para desarrollar un logotipo en Illustrator Cs3 y que después pueda ser importado en Swish Max 2008, obteniendo las características de edición completas. Este trabajo podría ser realizado en Swish Max 2008 directamente, pero al no ser la naturaleza de este software la de un programa de ilustración, se ve limitado en comparación de Illustrator Cs3.

“ARCHIVO>IMPORTAR” [Visible en la parte superior del software] Utilizando el panel “ALINEAR”, hacemos que la imagen quede centrada con relación a la mesa de trabajo, tanto vertical como horizontalmente.

El proceso de creación del logotipo a utilizar en este portafolio digital se basa en la herramienta “pluma” de Illustrator Cs3, que está disponible en el área de herramientas de dibujo.

21

DESARROLLO DEL PORTAFOLIO DIGITAL

Para cada uno de los elementos del logotipo se crea una capa diferente [visibles en la imagen]. También podemos valernos de otras herramientas: Texto, rectángulo, línea o circulo. Seleccionando los colores indicados en la ventana “MUESTRAS” o en la ventana “COLOR”.

Al finalizar, el archivo es guardado como “.pdf” o “.ai” [ambos editables para futuras intervenciones]. Además, es exportado como “.wmf”, para posteriormente ser importado en Swish como formas editables.

[Swish reconoce capas, colores planos y líneas importadas desde Illustrator, por lo que es importante estructurar los elementos debidamente en capas]

22

DESARROLLO DEL PORTAFOLIO DIGITAL Objetos en swish max 2008

CREAR TEXTOS

TAREAS EN SWISH MAX 2008

Título de cada sección. En este caso se nombrará “encabezado1” [En el panel “ESQUEMA” puedes nombrar los objetos como quieras]

Crear rectángulo utilizando la herramienta “rectángulo” en el panel de herramientas. Al seleccionarlo se activará el panel forma en el área de menús, con ello se podrán ajustar propiedades como tipo de color, nombre o estilo. Duplicar rectángulos para determinar la ubicación de todas las áreas del portafolio digital.

Formato para “encabezado1”: [Arial 18 pts. Color “221, 221, 221”.

Alineación: izquierda].

Contenido de la sección. En este caso se nombrará: “content_1” Formato para “content_1”: [Helvética Neue Extended 12 pts.

Color “221, 221, 221”. Alineación: izquierda].

1. Área de menú.

2. Área de información de contacto.

3. Área de contenido.

Es importante generar los objetos de texto con los atributos de tamaño, color y alineación finales, para que el espacio se encuentre distribuido correctamente desde los primeros pasos en la creación de las pantallas.

Se debe tomar en cuenta un espacio para la cabecera del portafolio dentro del área de contenido.

[Espacio en el cual puede ubicarse el nombre, logo y slogan del creador] Será de utilidad que en el panel “esquema” se identifique cada uno de los elementos que vamos creando con un nombre específico: “fondo”, “slogan”, “cabecera”, etc.

Agrupar los objetos de texto. Para realizar esta tarea se deben seleccionar los objetos de texto manteniendo la tecla “shift” presionada, luego ir a “ESQUEMA”, hacer clic derecho sobre los objetos e ir a:

23

DESARROLLO DEL PORTAFOLIO DIGITAL “Agrupar>Agrupar como Sprite”

modo: Un stop dentro de un sprite, no significa un stop en la reproducción de la escena, ni la aparición de un efecto dentro de un sprite que se afecte a ningún objeto externo. Un sprite en Swish Max es similar a la creación de un objeto en biblioteca de Flash.

Para crear más escenas [teniendo como punto de partida que la mayoría poseen los mismos elementos, ubicados en el mismo lugar] se hará clic derecho sobre la escena que tenemos creada y luego:

En este proceso será de utilidad tener los elementos debidamente identificados y clasificados, por ello, además de nombrar los objetos de textos se recomienda nombrar el “Sprite” como “TEXTOS”.

“copiar escena>clic derecho sobre el esquema>pegar escena” Esta tarea será realizada el número de veces que sea necesario, con ello se crearán escenas idénticas, con cada uno de los elementos básicos del portafolio. Nos beneficiará en tema de tiempo empleado en la creación del portafolio digital, ya que de acá en adelante solo se deberán agregar “elementos extra” o eliminar los que están de sobra.

En nuestro caso las escenas disponibles son: “PRELOADER”, “preloader_off”,“INICIO”, “A_CERCA_DE_MI”, “BRANDING_ILUSTRACION”, “SERVICIOS”, “BRANDING_ GAL” E “ILUSTRACION_GAL”

Un Sprite es un objeto cuyo contenido tiene una línea de tiempo independiente al de la escena en la que se esté trabajando, permitiendo así crear animaciones o manipular los objetos sin afectar nada que esté afuera del sprite. Además permiten activar animaciones sobre objetos que de no estar contenidos en un sprite no podrían animarse usando la galería completa de efectos de Swish Max. Pueden colocarse controles de reproducción que también serán independientes a la escena principal. Dicho de otro

24

DESARROLLO DEL PORTAFOLIO DIGITAL Edición de escenas duplicadas.

Estas escenas contienen a totalidad el portafolio digital. “INICIO” es la escena que sirve como pantalla de bienvenida. Desde esa pantalla se puede acceder a las diferentes opciones de contenido dentro del portafolio digital: “A_CERCA_DE_ MI”, “BRANDING_ILUSTRACION”, “SERVICIOS”. “BRANDING_ILUSTRACION” se diferencia de las otras dos escenas al ser ésta un menú para acceder a las galerías “BRANDING_GAL” e “ILUSTRACION_GAL” [El proceso de creación de una galería de imágenes se explicará más adelante]

Como vemos, las escenas que creamos a partir de la [escena por defecto] identificada como “INICIO”, tienen exactamente los mismos elementos: el menú, fondos de áreas, textos, etc. Para editar estos elementos bastará con hacer uso de las herramientas que proporciona Swish Max, paneles de “esquema”, “transformación”, “color” y “forma”.

En la imagen se muestra el contenido desplegado de las escenas “A_ CERCA_DE_MI” y “SERVICIOS”, ambas escenas fueron realizadas a partir de la escena por defecto que se configuró inicialmente.

No hay que olvidar que la edición de escenas dependerá de lo que hemos planteado en nuestro organigrama de portafolio y en el briefing. Estas dos herramientas siempre deben tenerse a la mano.

De lo contrario suele suceder que se terminan portafolios que no cumplen con las expectativas planteadas inicialmente y esto se refleja en la percepción y lectura del usuario.

25

DESARROLLO DEL PORTAFOLIO DIGITAL Comenzaremos por estudiar el menú que creamos dentro de “INDEX” [primera escena que trabajamos o escena por defecto en Swish Max después de configurada la película] “clic derecho sobre el grupo> convertir>convertir en botón”.

En esta imagen observamos los elementos de nuestro menú de navegación en la escena “INDEX”.

El menú está compuesto por los botones: “CERRAR” “ACERCA_ DE_”, “BRANDING”, “SERVICIOS” Y “CONTACTO”. Éstos fueron diseñados como formas vectoriales en Illustrator Cs3 e importados en Swish Max. Se agruparon como “sprites” y luego se convirtieron en botones, en el panel “ESQUEMA”: “clic derecho sobre el grupo> Convertir>Convertir en Botón”.

INTERACCIÓN ENTRE ESCENAS. Partiremos comprendiendo que la interactividad [portafolio digitalusuario] puede ser lograda de diversas formas, entre ellas: vía menús, animaciones, presentación de información por medio de bases de datos, gráficos, etc. 1

En el panel “BOTÓN” se pueden activar los estados que se usarán. Los botones de Swish Max disponen de los estados: “sobre”, “abajo” y Pulsado” [o área activa].

1. GALINDO SORIA, LEOPOLDO. DESARROLLO DE SISTEMAS INTERACTIVOS – MULTIMEDIA. Instituto politécnico Nacional, Zacatenco México.

26

DESARROLLO DEL PORTAFOLIO DIGITAL Cuando activamos cualquiera de estas opciones, automáticamente aparecerá el estado en el panel “ESQUEMA”. Esto puede verse a continuación.

Los botones que hemos creado tienen la misma estructura que el desplegado en esta imagen.

El botón desplegado es “ACERCA _DE_” y posee estado “arriba”, “sobre”, “abajo” y “pulsar” [o zona activa].

Los estados “arriba” y “abajo” contienen un sprite con formas vectoriales, que son las que constituyen la apariencia del botón. En el estado “sobre”, el sprite está contenido en otro sprite identificado como “FX”, esto con el objetivo de poder incluir un efecto de animación [proceso que veremos más adelante] Se puede agregar cualquier tipo de elemento dentro de los botones, es importante tener en cuenta que si se piensa animar, deben contenerse los objetos en sprites [esto genera una línea de tiempo independiente y pone a disposición todos los efectos por defecto de Swish Max, de los cuales a su vez se puede mencionar que son totalmente configurables]

Si hemos partido de una imagen, un “sprite” u otro elemento, este aparecerá automáticamente en el estado activado para que sea editado posteriormente.

Para vincular botones con escenas se debe hacer lo siguiente desde el panel “ESQUEMA”:

27

DESARROLLO DEL PORTAFOLIO DIGITAL “clic derecho sobre el botón>guión>control de película>irRep roducir>irReproducir (FOTOGRAMA)”.

on (release) { GotoSceneAndPlay(“INICIO”,1); } El guión descrito antes se traduce así: Al hacer clic sobre el botón, se irá “al X fotograma de la escena X” que especifiquemos en el panel “guión”. Para ello se hace lo siguiente: Vemos que en el panel “guión” aparece agregado el código [por defecto se configura como “guiado”.

Es recomendable mantenerlo así, si son nuestras primeras experiencias dentro de un software para animación. De lo contrario, bastará con cambiar la opción a “experto” y escribir las líneas de código necesarias].

En la opción “destino” se define el lugar dentro del portafolio donde se quiere ir con el botón seleccionado.

Al seleccionar estas opciones, automáticamente la operación aparece en el panel “GUIÓN”. También puede realizarse desde ahí siguiendo los mismos pasos. Lo que se verá en el panel guión es lo siguiente:

En este caso el botón “ACERCA_ DE_” nos lleva al primer fotograma de la escena “INICIO” [aquí INDEX] y al llegar ahí se reproduce la cabeza lectora automáticamente, teniendo stop en el fotograma 5.

28

DESARROLLO DEL PORTAFOLIO DIGITAL

El mismo proceso se realizará para todos los botones ubicados en el sprite “MENÚ” de la escena “INICIO”.

Los menús pueden ser editados de la manera que se crea conveniente. Además pueden agregárseles efectos [aparecen en la galería de efectos y son totalmente editables] guiones de código en Java Script y/o algunas funciones de Action Script.

Al finalizar esta tarea bastará con copiar el sprite “MENÚ”, ir a las otras escenas, eliminar el sprite “MENÚ” y “pegar en Lugar” [shit + control + V]. Con lo que tendremos un menú funcionando al 100%.

29

DESARROLLO DEL PORTAFOLIO DIGITAL

OTRO TIPO DE INTERACTIVIDAD.

Botón para salir “Quit”. Con un botón diseñado previamente en Illustrator Cs3, importado como forma, agrupado como sprite, convertido en botón, nos dirigimos al panel “GUIÓN” y se selecciona:

Es importante que el portafolio se muestre “Full Screen” y además tenga un botón para ser cerrado “Quit” por el usuario. A continuación una forma sencilla de crear ambos botones partiendo del uso del panel “GUIÓN”.

“añadir guión>navegador / red>comandoFS (…)”.

30

DESARROLLO DEL PORTAFOLIO DIGITAL

Luego en la opción “comando” se elige “Quit” y en “Argumento” se escribe “true”. Se verá como en la imagen anterior.

“comandoFS (…)” para crear un “full Screen” que se active desde el primer fotograma de la primera escena del portafolio, logrando así que en todo momento el contenido sea visto a pantalla completa al momento de su reproducción.

Este botón hará que el usuario pueda salir del portafolio al hacer clic sobre él en cualquier momento.

Este proceso se hace de la misma manera que el botón para cerrar “Quit”.

Botón para ver el portafolio digital a pantalla completa automáticamente al iniciar “Full Screen”.

También podemos usar la función

31

DESARROLLO DEL PORTAFOLIO DIGITAL a colocar el texto que será animado adentro del sprite “TEXT”, este posee un texto o descripción del botón, un fondo y un efecto de luz logrado con un relleno radial que va de “0, 176, 216” a transparente. Todos estos objetos están contenidos a su vez en el sprite “FX”.

La diferencia está en que se aplicará sobre el primer fotograma de la primera escena, en este caso “PRELOADER”… Es ahí donde se carga “comandoFS (...)”: comando “FullScreen”, argumento “true”. El panel “guión” debería verse como se muestra en la imagen anterior.

ANIMACIÓN DE OBJETOS. Lo que se quiere es que cuando el cursor del ratón pase sobre el botón “ACERCA_DE”, la descripción con el nombre haga un efecto de “aparecer” con una duración de 2 fotogramas. Para lograrlo bastara con hacer lo siguiente sobre el texto que ya tenemos en el sprite “FX>TEXT”:

Para desarrollar este punto se tomará como ejemplo la animación realizada en el estado “sobre” del botón “ACERCA_DE”, es de recordar que ya se mencionó que para tener acceso a toda la lista de efecto de Swish Max se debe colocar el / los objetos a animar adentro de un sprite.

“Efecto>Aparecer>Aparecer”.

En este caso, para una mejor organización de los elementos se recurrió

32

DESARROLLO DEL PORTAFOLIO DIGITAL Este proceso es mostrado gráficamente en la imagen de abajo.

Hay que tomar en cuenta que después de seleccionar un efecto, éste puede ser configurado a conveniencia haciendo doble clic sobre el efecto en la línea de tiempo.

En la imagen de abajo se ve que hay un efecto aplicado sobre la descripción del botón “ACERCA_DE” [aparecer, duración: 2 fotogramas, de 3 a 4] Ventana de configuración de efecto. Ésta presenta una gran variedad de opciones y la mejor forma de tener control sobre muchas de ellas será implementándolas en diferentes proyectos.

Una buena opción es utilizar la característica de guardado de efectos editados por el usuario, lo que permite tener ordenados los efectos que han sido generados por nosotros, teniéndolos a disposición para futuros proyectos.

Para aplicar cualquier otro efecto se realizará el mismo proceso, ya sea accediendo a los efectos a través de un clic derecho en el panel “ESQUEMA” o en la línea de tiempo del objeto que se desea animar.

33

DESARROLLO DEL PORTAFOLIO DIGITAL En la siguiente imagen se observa que en la ventana “configuración Aparecer”, el efecto justamente tiene una duración de 2 fotogramas, con una dirección “entrar”.

de la animación”, “configuración del color”, “configuración de la aceleración”, entre otras opciones.

Para finalizar con este tema, recordar que al contener objetos adentro de un sprite se está obteniendo una línea de tiempo independiente a la de la escena, por lo que no está de más colocar un stop después de terminada la aplicación de los efectos.

Cuando se busca que el efecto se reproduzca indefinidamente, bastará con no colocar el stop y la cabeza lectora de la línea de tiempo del sprite seguirá reproduciendo el efecto una y otra vez (en loop).

Habrán personas que querrán hacer efectos de animación sin utilizar la galería de efectos de Swish Max. Para esta tarea será muy útil la comprensión de las características: “colocar” y “quitar” dentro del menú de efectos y utilizar las herramientas que ofrece este software para animar fotograma por fotograma o utilizar el panel “GUIÓN” para animar mediante Script. También puede recurrirse a ilustraciones o imágenes externas.

Al final dependerá de los objetivos y preferencias de cada quien.

Existe la posibilidad de reproducir una vista previa del efecto sin salir de la ventana de configuración.

También puede cambiarse el efecto a reproducir desde el panel de configuración.

Todos los efectos poseen opciones adicionales como “configuración

34

DESARROLLO DEL PORTAFOLIO DIGITAL GALERÍA DE IMÁGENES.

Es recomendable organizar el contenido en carpetas dentro de nuestro equipo. En este caso se ha hecho en dos: “images” y “thumbs”. La carpeta “images” contiene las imágenes que serán mostradas a mayor tamaño y la carpeta “thumbs” contiene las imágenes que servirán como vistas previas.

Para agregar la galería de imágenes se deberá hacer una selección de contenido antes de comenzar a desarrollar el portafolio digital.

También es bueno crear un organigrama del contenido a mostrar.

Veamos a continuación el proceso para la creación de una galería de imágenes interna utilizando como recursos, los elementos que se ha estudiado hasta el momento: Imágenes, textos, botones, efectos de galería, vinculación e interactividad usando el panel “GUIÓN”.

En ambas carpetas debemos ordenar el contenido según la lógica en la que se mostrarán, identificándolas por trabajo y / o cliente o generando alguna forma de clasificación personal. Además siempre es bueno numerarlas según el orden en el que se colocarán [esto nos evitará posibles confusiones a futuro].

Nuestras carpetas se ven como en la imagen 2.29.

Selección de imágenes. Dentro de todas las posibilidades que tenemos sobre material a presentar en el portafolio digital, debemos recurrir a mostrar los trabajos que más se ajusten a nuestros objetivos y los del usuario potencial.

Las medidas a las que se guardará cada imagen “vista completa” y “vista previa” dependerá de las áreas destinadas por nosotros. Es conveniente preparar las imágenes en un software especializado, en este caso se usado Photoshop Cs3.

Las vistas completas se guardaron con una medida de 608 píxeles por 323 píxeles a 300 de resolución y las vistas previas con una medida de 32 píxeles por 37 píxeles a 300 de resolución.

De ser posible, no está de más hacer un estudio previo para conocer las preferencias de la o las personas a las que le vamos a entregar el portafolio posteriormente [ver modelo de briefing anexo en el trabajo escrito].

35

DESARROLLO DEL PORTAFOLIO DIGITAL

Puede parecer exagerado usar una resolución de 300 para las imágenes, pero es recomendable hacerlo, teniendo la seguridad que al exportar el portafolio digital final Swish Max hará la compresión debida de estos archivos.

texto y fondos [que han sido copiados y pegados en lugar desde otras escenas del portafolio]

Hasta este momento nos hemos ocupado debidamente de preparar las imágenes a utilizar. Si hay contenidos extra a agregar, conviene prepararlos antes de pasar a construir el portafolio, por ejemplo: logotipos, botones, fondo, áreas especiales, etc.

“Archivo>importar>abrir”.

En este caso, el portafolio cuenta con: imágenes [vista completa y vista previa “que es usada como botón”], logotipo,

El menú “importar” se ve como en la siguiente imagen..

Para importar los contenidos haremos lo siguiente:

El contenido importado se agregará automáticamente en el panel “ESQUEMA”, posteriormente se debe organizar a conveniencia, identificando o agrupando los elementos.

36

DESARROLLO DEL PORTAFOLIO DIGITAL

CONSTRUCCIÓN DE LA GALERÍA DE IMÁGENES Manteniendo la tecla “shift” presionada se pueden importar varios elementos al mismo tiempo.

El primer paso para la construcción de esta galería de imágenes fue editar la plantilla que se realizó externamente, utilizando los elementos que ya estaban presentes en

37

DESARROLLO DEL PORTAFOLIO DIGITAL otras escenas del portafolio digital, por ejemplo: El botón para cerrar “Quit”, los formatos de texto y el fondo. Luego se ordenaron los elementos en el panel “ESQUEMA”.

Se importaron las imágenes previamente preparadas en Photoshop CS3 [Vistas completas y vistas previas] y se organizaron una a una y se identificaron [en este caso como “image” para las vistas completas y “Thumb” para las vistas previas].

Operaciones que puede realizar el usuario. Cuando el usuario ingrese a una de las galerías por primera vez desde el menú de galerías “BRANDING_ILUSTRACION”, podrá seleccionar una de las vistas previas para que se muestre la imagen completa en el área destinada para dicha tarea.

También podrá elegir ir a otra galería desde un menú ubicado en el área descripción de la galería.

El siguiente paso es decidir: Qué posibilidades se desean dentro del portafolio digital mientras el usuario lo visita? Para ello veamos el siguiente ejemplo:

Tendrá la opción de cerrar “Quit” todo el portafolio digital, ir al inicio del mismo presionando el logotipo del portafolio, o ver un número correlativo y descripción de la imagen mostrada en el área de vista completa colocándose sobre la imagen.

Las galerías funcionarán de igual manera independientemente del contenido que se vea, se deben construir dos escenas idénticas, identificadas como “BRANDING_ GAL” e “ILUSTRACION_GAL”.

Desarrollo de las tareas para lograr todas las operaciones mencionadas en el párrafo anterior. El Menú de galerías para acceder por primera vez ha sido construido con el mismo formato generado en la escena de inicio o escena por defecto. Posee el menú de navegación general del portafolio digital al lado izquierdo, un área para mostrar la información de contacto, una cabecera que incluye el logotipo del por-

Los nombres mencionados entre comillas en el formato “NOMBRE”, corresponden a los que se ha decidido usar por nuestra parte, dependerá de cada quién el nombre a utilizar, ya que esto no afectará en ningún momento el funcionamiento del portafolio digital.

38

DESARROLLO DEL PORTAFOLIO DIGITAL

tafolio y un área de texto en donde se ha colocado dos imágenes que sirven como botones para acceder a las galerías: “BRANDING_GAL” o “ILUSTRACION_GAL”, como en todas las escenas, también está disponible un botón para cerrar “Quit” el portafolio digital.

En la imagen anterior se observa una plantilla de galería trabajada en Illustrator Cs3, exportada como “.wmf”, importada como formas editables en Swish Max. Y en la siguiente página se observan todos los elementos de los que dispondrá el portafolio creado en esta Guía.

39

DESARROLLO DEL PORTAFOLIO DIGITAL

El botón para cerrar “Quit” ha sido copiado desde otra escena. Puede consultarse “otro tipo de interacción” en “INTERACCIÓN ENTRE ESCENAS”.

La posibilidad de ir al inicio del portafolio digital desde la galería de imágenes se ha logrado haciendo del logotipo del portafolio un botón:

40

DESARROLLO DEL PORTAFOLIO DIGITAL “clic derecho sobre logo>Convertir>Convertir en tón”.

el bo-

cripción de la galería los nombres de los botones necesarios “BRANDING” E “ILUSTRACIÓN”. Estos textos fueron convertidos a botón y posteriormente utilizando el panel “GUIÓN” se les colocó como destino “BRANDING_GAL” e “ILUSTRACION_GAL” respectivamente.

Navegación de imágenes [vista completa y vista previa]. Para ambos casos se ha recurrido a convertir en botón las imágenes que se importaron a Swish Max: Por qué, porque con ello se puede optar por crear interacción con el usuario mediante la utilización de los estados “sobre” de los botones: Cómo, bastará con activar el estado sobre de los botones de las vistas previas y realizar los cambios que se consideren necesarios, en este caso se ha hecho lo siguiente:

Activando en el panel “BOTÓN” el estado “sobre” y aplicando un cambio de color en él, esto con la finalidad de que cuando el usuario pase el cursor del ratón sobre el logo, pueda diferenciar que se trata de un botón y no de un simple logo de portafolio. Esta posibilidad es muy acostumbrada actualmente en la Web, en blogs, páginas personales y redes sociales, por lo que se considera que está de más colocar una descripción al botón. Si esto se quisiera hacer, bastará con colocar el texto en el estado sobre y ubicarlo en el área que se considere conveniente.

“Clic derecho sobre la vista previa importada>Convertir>Convertir en Botón”.

Luego, se activó el estado “sobre” del botón de vista previa y sobre él se hizo lo siguiente:

La opción menú a galerías [al estar adentro de una de ellas] se ha logrado escribiendo en la barra de des-

“clic derecho sobre la imagen [vista previa en estado “sobre”] Convertir>Convertir en Sprite”.

41

DESARROLLO DEL PORTAFOLIO DIGITAL

Después a la imagen dentro del sprite se le aplicó un efecto “Salvaje – pulso” [disponible en efecto de “bucle continuo”] con una duración de diez fotogramas y los siguientes parámetros:

Descripción y número sobre las vistas completas. Para que las vistas completas [imágenes importadas, previamente preparadas en Photoshop Cs3, que fueron convertidas a botón al igual que las vistas previas] muestren la información sobre la imagen y un número correlativo al pasar sobre ellas, lo que se tiene que hacer es exactamente el mismo proceso seguido con los botones

Offset: 2; Scale: 50; Fade: 80; Cascade order: 0; Overlap: 50. Así se tiene lo que se observa en la imagen anterior “imagen 2.32”.

42

DESARROLLO DEL PORTAFOLIO DIGITAL o “stop” disponible en la línea de tiempo de la escena haciendo lo siguiente:

de vistas previas, con la diferencia que en el estado “sobre” de los botones se colocará la descripción y un rectángulo con color “0, 0, 0” y alfa de 85% [debe estar abajo del texto para que sirva de fondo y la lectura sea más fácil de realizar]. Se colocará donde se desea que aparezca durante la reproducción.

“Clic derecho fotograma>Control Película>Detener()”.

en

un de

Tareas en panel “LÍNEA DE TIEMPO”. Dicho panel está compuesto por la línea de tiempo de la escena [o general, donde se colocan los guiones de reproducción, navegación y los script] y la línea de tiempo de los objetos, teniendo una para cada objeto. A esto se le suma además, las líneas de tiempo independientes que son creadas para los sprites.

El número se crea con un texto y se coloca al igual que la descripción en el sitio donde se desea que aparezca. A todos los objetos se les aplican un efecto “aparecer” con los parámetros por defecto y una duración de siete fotogramas. Cuando el cursor del ratón pase sobre la imagen la información se mostrará, realizando el efecto seleccionado.

Lo que se hará para mostrar las imágenes al hacer clic sobre una vista previa será construir un sistema de paradas “stop” en la línea de tiempo, colocando una parada cada cinco fotogramas, el número de veces para realizar esta tarea dependerá del número de imágenes que contiene la galería.

Como ya se sabe, las vistas previas serán las encargadas de mostrar las vistas completas dentro del área designada a ello. Esta tarea podría realizarse mediante Script, pero esta guía tiene como objetivo ser un ejemplo básico para la creación de portafolios digitales, por lo que se usará un método que no requiere la utilización de Script, sino la implementación de herramientas que ya fueron utilizadas anteriormente en esta guía: efectos “colocar” y “quitar” y la propiedad “detener”

En este caso la galería “BRANDING_GAL” posee once imágenes, lo que significa once paradas en la línea de tiempo. Esto se ve así:

43

DESARROLLO DEL PORTAFOLIO DIGITAL

Ahora, en el primer fotograma después de la parada “stop”, se colocarán efectos “colocar” y “quitar”.

Esto dependerá del orden en que se mostrarán las imágenes. Por ejemplo, la primera imagen en esta galería es “image1”. Entonces, en el fotograma 1 de la escena, ésta tendrá en su línea de tiempo “colocar”

y en el primer fotograma después de cada parada “quitar”. La segunda imagen es “image2”, para ella, el primer fotograma de la escena tendrá “quitar”, el primer fotograma después de la primera parada “colocar” y en el primer fotograma después del resto de paradas “quitar”; así sucesivamente.

44

DESARROLLO DEL PORTAFOLIO DIGITAL Al final se verá como en la imagen 2.37. “página anterior”.

CENAS.” Para vincular un botón a una escena, como se dijo antes, la variación es que el destino será un fotograma dentro de la misma escena. Se presentará de la siguiente manera:

Esta tarea se ha realizado solo en las líneas de tiempo correspondientes a las imágenes, aquí identificadas en el formato “imageX”, donde X es un número correlativo. Seguramente nos preguntamos: Por qué realizar todos estos pasos, la respuesta es simple y está ligada al destino que se le dará a cada botón de vista previa. En casos anteriores colocamos como destino de un botón una escena X dentro del portafolio digital. En este caso, el destino será un fotograma dentro de la misma escena y por ello es necesario que cuando la cabeza lectora llegue al fotograma de destino, que solamente se muestre la imagen correspondiente a la vista previa.

En esta imagen se ve la configuración de la segunda vista previa “thumb2” de la galería “BRANDING_GAL”. La primera parada se encuentra en el fotograma 5 [correspondiente a la primera vista previa], el fotograma 6 es el primero después de la primera parada. En la línea de tiempo de la imagen dos “image2” aparece “colocar”, que corresponde a la vista previa en mención “thumb2”; y para el resto de imágenes aparece “quitar”. Esto quiere decir que al presionar la segunda vista previa, la cabeza lectora se dirigirá al fotograma seis de la

Por eso, en ese fotograma X, la imagen que si corresponde a la vista previa debe tener “colocar” y todas las demás “quitar”. Así debe funcionar en cada primer fotograma después de cada parada para cada imagen.

Vinculación de botón “vista previa” a fotograma X de imagen “vista completa”. Esta tarea se realizará de la misma manera que la descrita en “//5_INTERACCIÓN ENTRE ES-

45

DESARROLLO DEL PORTAFOLIO DIGITAL verse como una tarea final. Pero realmente dependerá de si se cree que el portafolio amerite una última revisión general y la realización de cambios “un nuevo botón por aquí… una transición entre escenas por allá… una actualización de una imagen, etc.”

misma escena “BRANDING_GAL”.

Y ahí mostrará solo la imagen que corresponde a la vista previa, ocultando las otras diez imágenes hasta que se presione la vista previa correspondiente a ellas.

Este proceso de vinculación se deberá efectuar para cada vista previa. Se recomienda usar “copiar guión” y “pegar guión” disponible en el panel “GUIÓN” y solo cambiar el destino, esto con la finalidad de maximizar el tiempo de desarrollo de la tarea.

Pre cargador de contenido “preloader”. Porqué realizarlo... La respuesta es única: porque al hacerlo, el equipo cargará todo el contenido del portafolio digital antes de mostrar al usuario algo en pantalla que no sea el pre cargador. Esto en un portafolio que se presenta por medio de CD, DVD o USB y es igualmente útil. Aunque la carga es mucho más rápida que si, por dar un ejemplo, el portafolio se encuentra en un sitio Web; no está de más prevenir realizando este “último paso” para no lamentarnos cuando al reproducir el portafolio en un equipo no adecuado a las características definidas al inicio, se vea lento o con interrupciones en las animaciones.

Si se desea que la galería sea accesible en otro lugar, por ejemplo el menú de inicio o el menú general, bastará con colocar un botón dentro de dicha escena que tenga como destino la escena de la o las galerías. Es recomendable colocar un botón de regreso y uno de cierre del portafolio digital siempre.

EL PRE CARGADOR CONTENIDO.

DE

El pre cargador estará contenido en una escena que debe ubicarse como primera en el panel “ESQUEMA”. Será entonces aquí donde se agregue también la característica

Realizar un pre cargador de contenido será útil al momento de reproducir el portafolio digital. Podría

46

DESARROLLO DEL PORTAFOLIO DIGITAL “FullScreen”, justo en el primer fotograma de la escena que en este caso se identificará como “PRELOADER”. En el pre cargador del portafolio se colocará un texto “cargando…” y puede agregarse una

animación contenida en un sprite cuya línea de tiempo se reproduzca indefinidamente. Queda a opción personal, colocar fondo u otros elementos que se consideren pertinentes.

47

DESARROLLO DEL PORTAFOLIO DIGITAL Después de agregar elementos, se accederá al panel “GUIÓN” para realizar lo siguiente [todo el proceso será realizado en modo guiado]:

Definir como destino “la última escena del portafolio digital” y en fotograma escribir “número del último fotograma de dicha escena”. Luego se indicará qué se debe hacer si la condición se cumple, haciendo lo siguiente: “Añadir guión>Control de Película> irReproducir>irReproducir(FOTOGR AMA)”

“Añadirguión>Eventos>Fotograma > enFotograma(...)”

Como parámetros definir en fotograma 1. Y colocar un “FullScreen” haciendo lo siguiente: “Añadir guión>Navegador/Red> ComandoFS(...)”

Parámetros: Comando creen”, Argumento “true”.

Se configurará lo siguiente, destino: “escena de inicio [o la que se desea mostrar primero]”. Fotograma: “1”.

“FullSLuego se definirá en un fotograma posterior [en este caso se ha colocado en el número 21] la indicación sobre qué hacer si la condición no se cumple. Para ello se agrega lo siguiente:

Después realizar las siguientes tareas: “Añadir guión>Eventos>Fotograma >EnFotograma(...)”

“Añadir guión>Eventos>Fotograma >EnFotograma(...)”

Activar la opción “después de eventos para objetos colocados” y establecer como fotograma el número 1.

Se debe activar la opción “Después de eventos para objetos colocados” y agregar lo siguiente:

Luego se agregará una condición para que sea cargado todo el contenido, haciendo lo siguiente:

“Añadir guión>Control de Película> irReproducir>irReproducir(FOTOGR AMA)”

“Añadir guión>Condicional>Si(Foto gramaCargado(...)){”

Estableciendo como destino: “PRELOADER” y como fotograma el nú-

48

FUNDAMENTOS DEL DISEÑO - CONCEPTUALIZACIÓN mero “1”. En un fotograma posterior al 21 [según este caso], por ejemplo el 22 se dará la orden de pre carga escribiendo esto:

eventos para objetos colocados” y luego agregando: “Añadir guión>Fotograma>preload Content()

“Añadir guión>Eventos>Fotograma >EnFotograma(...)”

Si se han realizado todas las tareas con éxito, se debería ver lo siguiente:

Activando la opción “Después de

49

FUNDAMENTOS DEL DISEÑO - CONCEPTUALIZACIÓN

Al reproducir la película se verá [según la capacidad de nuestro equipo] que el tiempo de la cabeza lectora en el pre cargador es casi nulo. Este límite aumentará, por ejemplo, si el portafolio digital es colocado en un sitio Web, debido a que la carga del contenido será más lenta. Así que eso no es motivo para preocuparse, sino lo contrario… pues el equipo que se usa tiene una gran capacidad. En base a eso puede definirse con mejor exactitud cuáles son los requerimientos mínimos para la reproducción del portafolio digital: Memoria RAM, procesador, espacio en disco duro, unidad de reproducción, etc.

50

DESARROLLO DEL PORTAFOLIO DIGITAL GLOSARIO Previo a la indagación en el tema de la investigación, el grupo ha considerado necesario incluir un glosario que explique conceptos de los cuales se han hecho referencia y se utilizarán en los siguientes capítulos.

web desde el propio navegador y sin necesidad de ningún otro programa auxiliar. Están pensados para utilizarlos como una especie de diario on line que una persona usa para informar, compartir, debatir periódicamente de las cosas que le gustan e interesan.

ANIMACIÓN:

DPI:

Técnica que genera sensación de movimiento a través de una secuencia de imágenes o dibujos.

Para realizar animación existen numerosas técnicas que van más allá de los familiares dibujos animados.

Los cuadros se pueden generar dibujando, pintando, o fotografiando los minúsculos cambios hechos repetidamente a un modelo de la realidad o a un modelo bidimensional o tridimensional virtual; también es posible animar objetos de la realidad y actores.

Término en inglés: Dots Per Inch, que significa puntos por pulgada.

Unidad de medida de la resolución de una imagen (relacionado con la calidad) de un escáner, una impresora, etc. Sirve para medir la resolución, que es la cantidad de puntos (pixeles) que entran en una pulgada.

Se expresa así: (número)x(número) dpi. Una resolución de 300 dpi producirá un texto que mostrará líneas quebradas visibles bajo una lupa.

Resoluciones aún más grandes son necesarias para obtener reproducciones de fotografías suaves. Los gráficos profesionales usan impresoras con resoluciones desde 1200 a 2400 dpi.

BLOG: Conocido también como weblog o bitácora de web, este es un espacio personal de escritura en Internet en el que el autor publica artículos o noticias que pueden contener texto, imágenes e hipervínculos. Los nuevos contenidos se añaden vía

FORMATO: Es una forma particular de codificar información para ser almacenado.

Existen diferentes tipos de forma-

52

DESARROLLO DEL PORTAFOLIO DIGITAL tos para diferentes tipos de información. Por esto existen formatos gráficos, audio, animación, documentos, entre otros.

cada mensaje se relaciona con el previo, y con la relación entre éste y los precedentes.

INTERFAZ:

Un formato es lo que permite a una aplicación interpretar los datos crudos en un archivo. En otras palabras, un formato es un modo de representación de estos datos.

Modo visual que permite al usuario interactuar con el hardware y el conjunto de valores de programación de un sistema determinado.

Muchas veces, los formatos de archivos están marcados en la extensión del nombre del archivo: el sufijo de tres letras con el que el nombre del archivo termina. Por ejemplo mypage.htm es un documento escrito en HTML; hay formatos específicos para imágenes (como JPEG, PNG, GIF, TIF, BMP), texto simple (ASCII, comúnmente marcado con la extensión .txt), para texto formateado (HTML, RTF, DOC) y para documentos listos para la impresora (PDF, PS).

INTERNET: Es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial.

Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW, o “la Web”), hasta tal punto que es habitual la confusión entre ambos términos.

La “www” es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. Ésta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisión.

INTERACTIVIDAD: Concepto ampliamente utilizado en las ciencias de la comunicación, en informática, en diseño digital y en diseño industrial.

La interactividad es similar al nivel de respuesta, y se estudia como un proceso de comunicación en el que

53

DESARROLLO DEL PORTAFOLIO DIGITAL PIXEL:

Existen, por tanto, muchos otros servicios y protocolos en Internet, aparte de la Web: el envío de correo electrónico (SMTP), la transmisión de archivos (FTP y P2P), las conversaciones en línea (IRC), la mensajería instantánea y presencia, la transmisión de contenido y comunicación digital -telefonía (VoIP), televisión (IPTV)-, los boletines electrónicos (NNTP), el acceso remoto a otras máquinas (SSH) o los juegos en línea.

Es la menor unidad posible con la que se compone cualquier imagen digital. Las imágenes gráficas son formadas por una matriz rectangular de pixeles. Para almacenar la información de una imagen, cada píxel se codifica mediante un conjunto de bits de una longitud determinada (llamada profundidad de color). Los pixeles también se utilizan como unidad para medir la resolución de una pantalla, una imagen y de algunos dispositivos como por ejemplo las cámaras digitales (que utilizan los megapíxeles).

DIGITAL: Es un término que se aplica a cualquier objeto que usa simultáneamente diferentes formas de contenido informativo como texto, sonido, imágenes, animación y video para informar o entretener al usuario. También se puede calificar como digital a los medios electrónicos (u otros medios) que permiten almacenar y presentar contenido digital. Digital es similar al empleo tradicional de medios mixtos en las artes plásticas, pero con un alcance más amplio; gracias a la utilización de medios electrónicos que permiten mayor cantidad de receptores simultáneamente.

RESOLUCIÓN: Término asociado a la calidad de imagen en pantallas, impresoras, escáneres, cámaras, etc. Es el número de píxeles que pueden ser vistos en una pantalla y son representados en sentido horizontal y vertical. Existen gran cantidad de resoluciones como por ejemplo: 320 x 480, 640 x 480, 800 x 600, 1280 x 800, etc. La multiplicación de ambos números da como resultado el total de píxeles que se representan en la pantalla.

54

DESARROLLO DEL PORTAFOLIO DIGITAL SOFTWARE:

todas las propiedades y métodos del mismo.

Se refiere al equipamiento lógico o soporte lógico de un computador digital, comprende el conjunto de los componentes lógicos necesarios para hacer posible la realización de una tarea específica utilizando una interfaz determinada, en contraposición a los componentes físicos del sistema (hardware). Algunos ejemplos básicos de software lo comprenden aplicaciones informáticas tales como el procesador de textos, que permite al usuario realizar todas las tareas concernientes a edición de textos; software de sistema, tal como un sistema operativo, el que, básicamente, permite al resto de los programas funcionar adecuadamente, facilitando la interacción con los componentes físicos y el resto de las aplicaciones, también provee una v ante el usuario.

USUARIO: Es un individuo que utiliza una computadora, sistema operativo, servicio o cualquier sistema informático.

Por lo general es una única persona.

Un usuario generalmente se identifica frente al sistema o servicio utilizando un nombre de usuario (nick) y a veces una contraseña, este tipo es llamado usuario registrado.

VÍNCULO O ENLACE: Es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él.

SPRITE: Es un objeto simple con línea de tiempo independiente a la de la película en la que se trabaja, cuyos objetos pueden poseer animación o efectos. El concepto de sprite en SwishMax equivale al de “MovieClip” de Flash, aunque no soporta

55

DESARROLLO DEL PORTAFOLIO DIGITAL

TABLA RESUMEN DE SOFTWARE ADICIONAL

56