GUIA DIDACTICA PARA DISEÑAR PORTAFOLIOS DIGITALES

UN

IVER

SIDAD DE EL SALVAD

OR

CENTRO AMERICA

“GUÍA DIDÁCTICA PARA DISEÑAR PORTAFOLIOS DIGITALES”

PRESENTADA POR:

ISABEL ALEJANDRA FLORES SÁNCHEZJORGE ALBERTO MERINO MURCIA

ANNA WALTER PORRAS

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

GUÍA PARA LA CREACIÓN DE PORTAFOLIOS DIGITALES


BRIEFING Y ORGANIGRAMA

FUNDAMENTOS DEL DISEÑO:CONCEPTUALIZACIÓN

DESARROLLO DEL PORTAFOLIO DIGITAL

INDICECréditosIntroducción

6i

BriefingOrganigramaSugerencias

101111

Concepto creativoMuestra de proyectosCuestiones técnicasPresentación

13131415

Abrir software [Swish Max 2008]Configuración de la mesa de trabajoVelocidad de fotogramasActivar propiedad “detener”Fondo de la películaPanel “guías”Preparación de contenidosTareasCrear textosInteracción entre escenasOtro tipo de interactividadAnimación de objetosGalería de imágenesConstrucción de la galería de imágenesEl pre cargador de contenidoGlosarioTabla resumen de software adicional

1717181818182123242731

323538475256


Realizada en el marco de proceso de grado:

“Guía para la elaboración de portafolios digitales”.

Escuela de ArtesFacultad de Ciencias y Humanidades

Universidad de El Salvador

Elaborado por :

Alejandra FloresAnna Walter

Jorge Merino

Bajo la asesoría de:

Lic. Xenia Pérez

Febrero, 2010

CRÉDITOS


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 comu-nicación (como sucedió con el nacimiento de la televisión, la computa-ció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 co-municació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, refle-jándose en un mundo de exigencias y competencia. Para poder empe-zar 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ác-tica 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


INTRODUCCIÓN.

CONCEPTO DEL PORTAFOLIO DIGITAL.

El portafolio es una herramienta de recopilación de trabajos/proyectos que facilita información de desarro-llo, aportaciones y logros alcanza-dos a lo largo de una carrera aca-démica o profesional, definiendo el área o las áreas en las que se es-pecializa. A la vez, muestra las ca-pacidades, conocimientos, línea de trabajo, enfoque, estilo, entre otros, de la persona.

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, in-dustrial y artesanal; artes plásticas, como: pintura, escultura, dibujo y cerámica.

La utilidad del portafolio se refleja en su fácil y ágil accesibili-dad.

Ya que cada portafolio re-quiere de un diferenciador concep-tual y visual, su diseño debe ser único, creativo e innovador para

distinguirse de otros en el campo competitivo.

Puede ser presentado en diferentes formatos , tanto tradi-cionales (carpetas), que se refiere a los impresos; y digitales o elec-tró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 exposi-ción práctica, efectiva y portátil en-tre su autor y los receptores intere-sados. Presenta una variada mues-tra académica y/o laboral, con una secuencia organizada y breve des-cripción, como un paquete gráfico unificado, sin dejar de mantener un enfoque unitario en la presenta-ción.

Proporcion la información necesaria para los diferentes entes según su propósito: docentes, po-tenciales empleadores, institucio-nes educativas, asesores, profesio-nales, galerías, entre otros.

9


Es una herramienta eficaz para presentar junto con la solicitud de admisión a un curso de postgra-do, una beca, un concurso, una en-trevista de trabajo o un cliente po-tencial.

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 docu-mento 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 em-presa 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 fomenta-rá una creatividad bien orientada y

efectiva. Por ende, el briefing sir-ve tanto para definir y establecer, como para delimitar.

1.1 Esquema realizado por el grupo de investigación

BRIEFING - ORGANIGRAMA

10

ORGANIGRAMA

Un organigrama es la representa-ción gráfica de una estructura en donde se pone de manifiesto la re-lación formal existente entre las di-versas unidades que lo integran. En este punto no se debe tratar de ha-cer guiones, animaciones, videos ni nada por el estilo.

Esta tarea comprende simplemen-te 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á acce-so a los mismos.

Es una herramienta eficaz para presentar junto con la solicitud de admisión a un curso de postgrado, una beca, un concurso, una entre-vista de trabajo o un cliente poten-cial.

SUGERENCIAS

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

Las líneas o conectores de-ben ser claras y no mezclarse entre si.

11


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 organi-grama con demasiada información o con abreviaturas, es importante indicar al pie del organigrama el significado de cada uno de los ele-mentos.

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


2. FUNDAMENTOS DEL DISEÑO – CONCEPTUALIZACIÓN.

[Basado en taller + ejemplos]

A continuación se exponen varios puntos de cuatro temas importan-tes: concepto creativo, muestra, cuestiones técnicas y presenta-ción. Es necesario aclarar que lo expues-to 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.

CONCEPTO CREATIVO

Es necesario que la calidad del con-cepto y de la imagen del portafo-lio sean congruentes con la de la muestra académica y/o laboral. El diseño del portafolio debe visuali-zarse como parte de la carpeta de trabajos. De esta manera una no debe superar a la otra.

Los gráficos del portafolio no de-ben ser decorativos, sino que de-ben respaldar el concepto medular del portafolio. El tema debe aterri-zar en algo concreto. Generalmen-te las formas orgánicas resultan ser gráficos sin ningún fundamento conceptual.

Con esta perspectiva se puede po-ner en evidencia la diferencia entre un diseñador ornamental y un co-municador.

Es conveniente que el concepto re-salte sobre la tendencia global tan-to de los portafolios como del flujo gráfico que se manifiesta en la pu-blicidad.

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 protagonis-mo.

MUESTRA DE PROYECTOS

La recopilación de proyectos de-pende del área de trabajo al que el diseñador esté aplicando. Por ejemplo, para aplicar a una agencia es pertinente incluir diseños publi-citarios, diseño editorial, fotografía y trabajo en el que se denote di-rección de arte. Debe ser diferente al aplicar a una empresa editorial, en ese caso sería necesario mos-trar diseños editoriales, fotografía e ilustraciones. Incluso, cuando el autor del portafolio tiene un estilo

FUNDAMENTOS DEL DISEÑO - CONCEPTUALIZACIÓN

13

determinado, puede insistir en éste a lo largo del portafolio. Siempre y cuando haya un mercado necesita-do 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 en-tre la competencia.

Se puede montar un portafolio ver-sátil, pero más importante es mos-trar trabajos singulares.

La muestra debe denotar la capa-cidad de síntesis que tiene el di-señador. De la misma manera, no debe ser muy largo, ni repetitivo. No existe un parámetro para defi-nir un orden estratégico de muestra de trabajos. Es factible ubicar los mejores trabajos al principio o se pueden intercalar los excepciona-les con los regulares. Esta decisión debe depender del tiempo que tie-ne el receptor del portafolio.

Es importante reflejar uniformidad en la calidad de los trabajos de la galería. No es necesario que refle-je 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 selec-ción de materiales.

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 pro-yectos. Todo el trabajo que se incluya debe ser propio, en ningún caso se debe recurrir al plagio.

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

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.

La galería debe ser de fácil navega-bilidad. Otras especificaciones im-portantes son que incluyan el botón de cerrar ventana y la opción de si-lenciar la música, en el caso de que se presente el portafolio con audio.


14

Si se utiliza imagen gráfica, las ani-maciones 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 bo-tón de skip intro.

PRESENTACIÓN

El disco compacto debe ir bien presen-tado en un empaque funcional.

El currículum no debe ir dentro de la presentación del portafolio. Puede ir im-preso y anexado al disco compacto de la presentación del portafolio o puede estar como archivo digital al lado del ar-chivo 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 equi-po. Esto se denota a través del len-guaje corporal.


15

3. DESARROLLO DEL PORTAFOLIO DIGITAL.

[Swish Max 2008]

A continuación encontrarás paso a paso cómo realizar tu portafolio di-gital a través del programa operati-vo Swish Max.

Dicho programa tiene como funcio-nes especiales la creación de am-bientes interactivos a través de ani-maciones y vinculación de objetos.

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 limi-tantes, por lo que es recomendable utilizar otros programas para crear elementos gráficos y luego impor-tarlos a Swish Max.

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


16

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

ABRIR SOFTWARE [Swish Max 2008]

El software genera un documento estándar al abrirlo. Las propieda-des deben ser configuradas por el usuario, adaptando así las caracte-rí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 tecno-logía auxiliar al realizar esta tarea.

Los colores aparecen nom-brados 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 úti-les para el desarrollo de portafolios digitales”] Swish Max trabaja colores en sistema RGB y hexadecimales.

CONFIGURACIÓN DE LA MESA DE TRABAJO

EN PANEL “PELÍCULA”

Tamaño de mesa de trabajo. [900x800px] Generalmente el ta-maño de la mesa de trabajo está sujeta a las características del equi-po o medio en el que se reproducirá el portafolio digital. Así, puede pen-sarse en una presentación a panta-lla completa o en un encaje en pan-talla contemplando los menús de navegación de un explorador Web. Lo mejor para cualquiera de los ca-sos es realizar pruebas previas so-bre diversos tamaños de mesa de trabajo reproducidos en diferentes medios finales.


17

VELOCIDAD DE FOTOGRAMAS

12 fotogramas / seg. La velocidad de fotogramas por segundo varia-rá 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 por-tafolio digital presentado en un CD, se puede utilizar en 24 o 30 fotogra-mas / Seg. Por otro lado, si su finalidad es la Web, será suficiente animar con el valor por defecto.

ACTIVAR PROPIEDAD “DETENER”

Detener reproducción al final. En algún momento sucederá que que-ramos ver cómo se comporta la in-terfaz 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”.

EN EL PANEL “GUÍAS”

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 fon-do en Swish Max 2008, en nuestro caso utilizamos un archivo “.jpg” que fue trabajado en Photoshop Cs3 Extended de la siguiente ma-nera:


18


Es importante crear líneas guías para definir el área destinada al menú de navegación, a los conte-nidos, logotipo y créditos. Además si hemos decidido colocar otra in-formación, no está de más contem-plarlo desde el principios.

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

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

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

Existen otras posibilidades para crear luces en Photoshop.

19

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

el área de las herramientas.

Capa de ajuste “brillo y contraste”. Esta opción permite acentuar la di-ferencia 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 inter-pretación de los colores originales en grises realizada por Photoshop.

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


20

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

“ARCHIVO>IMPORTAR” [Visible en la parte superior del software]Utilizando el panel “ALINEAR”, ha-cemos que la imagen quede cen-trada con relación a la mesa de trabajo, tanto vertical como hori-zontalmente.

Preparación de contenidos

Existe una amplia gama de formas para realizar tareas en torno al material para un Portafolio Digi-tal. A continuación se explica de manera básica los pasos a seguir para desarrollar un logotipo en Illus-trator Cs3 y que después pueda ser importado en Swish Max 2008, ob-teniendo las características de edi-ción completas. Este trabajo podría ser realizado en Swish Max 2008 directamente, pero al no ser la na-turaleza de este software la de un programa de ilustración, se ve limi-tado en comparación de Illustrator Cs3.

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 dibu-jo.


21

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

Al finalizar, el archivo es guardado como “.pdf” o “.ai” [ambos editables para futuras intervenciones]. Ade-má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 debida-mente en capas]


22

Objetos en swish max 2008

TAREAS EN SWISH MAX 2008

Crear rectángulo utilizando la he-rramienta “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 ajus-tar propiedades como tipo de color, nombre o estilo. Duplicar rectángu-los para determinar la ubicación de todas las áreas del portafolio digi-tal.

1. Área de menú. 2. Área de información de contacto.3. Área de contenido.

Se debe tomar en cuenta un espacio para la cabecera del porta-folio dentro del área de contenido. [Espacio en el cual puede ubicarse el nombre, logo y slogan del crea-dor] Será de utilidad que en el pa-nel “esquema” se identifique cada uno de los elementos que vamos creando con un nombre específico: “fondo”, “slogan”, “cabecera”, etc.

CREAR TEXTOS

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

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: iz-quierda].

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

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


23


24

“Agrupar>Agrupar como Sprite”

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”.

Un Sprite es un objeto cuyo contenido tiene una línea de tiempo independiente al de la escena en la que se esté trabajando, permitien-do así crear animaciones o mani-pular 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 animar-se usando la galería completa de efectos de Swish Max. Pueden co-locarse controles de reproducción que también serán independientes a la escena principal. Dicho de otro

modo: Un stop dentro de un sprite, no significa un stop en la reproduc-ció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 ma-yoría poseen los mismos elemen-tos, ubicados en el mismo lugar] se hará clic derecho sobre la escena que tenemos creada y luego:

“copiar escena>clic derecho sobre el esquema>pegar escena”

Esta tarea será realizada el núme-ro 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 elimi-nar los que están de sobra. En nuestro caso las escenas dis-ponibles son: “PRELOADER”, “preloader_off”,“INICIO”, “A_CER-CA_DE_MI”, “BRANDING_ILUSTRA-CION”, “SERVICIOS”, “BRANDING_GAL” E “ILUSTRACION_GAL”


25

Edición de escenas duplicadas. Estas escenas contienen a totali-dad 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_ILUS-TRACION” se diferencia de las otras dos escenas al ser ésta un menú para acceder a las galerías “BRANDING_GAL” e “ILUSTRA-CION_GAL” [El proceso de creación de una galería de imágenes se ex-plicará más adelante]

Como vemos, las escenas que creamos a partir de la [escena por defecto] identificada como “INI-CIO”, tienen exactamente los mis-mos 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 conteni-do 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 nues-tro 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 plan-teadas inicialmente y esto se refleja en la percepción y lectura del usua-rio.

INTERACCIÓN ENTRE ESCENAS.

Partiremos comprendiendo que la interactividad [portafolio digital- usuario] puede ser lograda de di-versas formas, entre ellas: vía me-nús, animaciones, presentación de información por medio de bases de datos, gráficos, etc. 1

Comenzaremos por estudiar el menú que creamos dentro de “IN-DEX” [primera escena que trabaja-mos o escena por defecto en Swish Max después de configurada la pe-lí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 di-señ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”.

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

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


26

Cuando activamos cualquiera de estas opciones, automáticamen-te aparecerá el estado en el panel “ESQUEMA”. Esto puede verse a continuación.

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

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”, “so-bre”, “abajo” y “pulsar” [o zona ac-tiva]. Los estados “arriba” y “abajo” con-tienen un sprite con formas vecto-riales, 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 bo-tones, es importante tener en cuen-ta 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 total-mente configurables]

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


27

“clic derecho sobre el botón>guión>control de película>irReproducir>irReproducir (FOTOGRAMA)”.

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

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 pa-nel “guión”. Para ello se hace lo si-guiente:

Vemos que en el panel “guión” apa-rece agregado el código [por defec-to se configura como “guiado”.

Es recomendable mantenerlo así, si son nuestras primeras experien-cias 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 nece-sarias].

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

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

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

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%.

Los menús pueden ser editados de la manera que se crea convenien-te. 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.


29

OTRO TIPO DE INTERACTIVIDAD.

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

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

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


30

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

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

Botón para ver el portafolio digital a pantalla completa automáticamen-te al iniciar “Full Screen”. También podemos usar la función

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

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


31

La diferencia está en que se aplica-rá sobre el primer fotograma de la primera escena, en este caso “PRE-LOADER”… Es ahí donde se carga “comandoFS (...)”: comando “Fu-llScreen”, argumento “true”. El pa-nel “guión” debería verse como se muestra en la imagen anterior.

ANIMACIÓN DE OBJETOS.

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

En este caso, para una mejor organi-zación de los elementos se recurrió

a colocar el texto que será anima-do 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. To-dos estos objetos están contenidos a su vez en el sprite “FX”.

Lo que se quiere es que cuando el cursor del ratón pase sobre el bo-tón “ACERCA_DE”, la descripción con el nombre haga un efecto de “aparecer” con una duración de 2 fotogramas. Para lograrlo basta-ra con hacer lo siguiente sobre el texto que ya tenemos en el sprite “FX>TEXT”:

“Efecto>Aparecer>Aparecer”.


32

Este proceso es mostrado gráfica-mente en la imagen de abajo.

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 pa-nel “ESQUEMA” o en la línea de tiempo del objeto que se desea animar.

Hay que tomar en cuenta que des-pués de seleccionar un efecto, éste puede ser configurado a convenien-cia 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 descrip-ción del botón “ACERCA_DE” [apare-cer, 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 pro-yectos.

Una buena opción es utilizar la carac-terística de guardado de efectos edi-tados por el usuario, lo que permite tener ordenados los efectos que han sido generados por nosotros, tenién-dolos a disposición para futuros pro-yectos.


33

En la siguiente imagen se observa que en la ventana “configuración Aparecer”, el efecto justamente tie-ne una duración de 2 fotogramas, con una dirección “entrar”.

Existe la posibilidad de reproducir una vista previa del efecto sin sa-lir de la ventana de configuración. También puede cambiarse el efecto a reproducir desde el panel de con-figuración.

Todos los efectos poseen opciones adicionales como “configuración

de la animación”, “configuración del color”, “configuración de la ace-leración”, entre otras opciones.

Para finalizar con este tema, recor-dar 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 efec-tos.

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

Habrán personas que que-rrá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 median-te Script. También puede recurrirse a ilustraciones o imágenes externas. Al final dependerá de los objetivos y preferencias de cada quien.


34

GALERÍA DE IMÁGENES.

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

También es bueno crear un organi-grama 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”.

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

De ser posible, no está de más ha-cer un estudio previo para conocer las preferencias de la o las perso-nas a las que le vamos a entregar el portafolio posteriormente [ver mo-delo de briefing anexo en el trabajo escrito].

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

En ambas carpetas debemos orde-nar el contenido según la lógica en la que se mostrarán, identificándo-las por trabajo y / o cliente o gene-rando alguna forma de clasificación personal. Además siempre es bue-no numerarlas según el orden en el que se colocarán [esto nos evita-rá posibles confusiones a futuro]. Nuestras carpetas se ven como en la imagen 2.29.

Las medidas a las que se guarda-rá 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.


35

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

Hasta este momento nos hemos ocu-pado 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.

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

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

Para importar los contenidos haremos lo siguiente:

“Archivo>importar>abrir”.

El contenido importado se agregará automáticamente en el panel “ES-QUEMA”, posteriormente se debe or-ganizar a conveniencia, identificando o agrupando los elementos.

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


36

Manteniendo la tecla “shift” presionada se pueden importar varios elementos al mismo tiempo.

CONSTRUCCIÓN DE LA GALERÍA DE IMÁGENES

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


37

otras escenas del portafolio digital, por ejemplo: El botón para cerrar “Quit”, los formatos de texto y el fondo. Luego se ordenaron los ele-mentos en el panel “ESQUEMA”. Se importaron las imágenes previa-mente preparadas en Photoshop CS3 [Vistas completas y vistas pre-vias] y se organizaron una a una y se identificaron [en este caso como “image” para las vistas completas y “Thumb” para las vistas previas].

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

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”.

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

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 “BRAN-DING_ILUSTRACION”, podrá selec-cionar una de las vistas previas para que se muestre la imagen completa en el área destinada para dicha ta-rea.

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

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

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


38

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 to-das las escenas, también está dis-ponible 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 si-guiente página se observan todos los elementos de los que dispondrá el portafolio creado en esta Guía.


39

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

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


40

“clic derecho sobre el logo>Convertir>Convertir en bo-tón”.

Activando en el panel “BOTÓN” el estado “sobre” y aplicando un cam-bio de color en él, esto con la finali-dad 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 con-sidera que está de más colocar una descripción al botón. Si esto se qui-siera hacer, bastará con colocar el texto en el estado sobre y ubicarlo en el área que se considere conve-niente.

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

cripción de la galería los nombres de los botones necesarios “BRAN-DING” E “ILUSTRACIÓN”. Estos textos fueron convertidos a botón y posteriormente utilizando el panel “GUIÓN” se les colocó como desti-no “BRANDING_GAL” e “ILUSTRA-CION_GAL” respectivamente.

Navegación de imágenes [vista completa y vista previa]. Para am-bos casos se ha recurrido a con-vertir 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 me-diante la utilización de los estados “sobre” de los botones: Cómo, bas-tará con activar el estado sobre de los botones de las vistas previas y realizar los cambios que se consi-deren necesarios, en este caso se ha hecho lo siguiente:

“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:

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


41

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

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

Descripción y número sobre las vis-tas completas. Para que las vistas completas [imágenes importadas, previamente preparadas en Pho-toshop Cs3, que fueron convertidas a botón al igual que las vistas pre-vias] 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


42

de vistas previas, con la diferencia que en el estado “sobre” de los bo-tones 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 apa-rezca durante la reproducción.

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

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 requie-re la utilización de Script, sino la im-plementación de herramientas que ya fueron utilizadas anteriormente en esta guía: efectos “colocar” y “quitar” y la propiedad “detener”

o “stop” disponible en la línea de tiempo de la escena haciendo lo si-guiente:

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

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

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

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


43

Ahora, en el primer fotograma des-pués de la parada “stop”, se colo-cará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 ten-drá en su línea de tiempo “colocar”

y en el primer fotograma después de cada parada “quitar”. La segun-da imagen es “image2”, para ella, el primer fotograma de la escena tendrá “quitar”, el primer fotograma después de la primera parada “co-locar” y en el primer fotograma des-pués del resto de paradas “quitar”; así sucesivamente.


44

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

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 des-tino 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 correspondien-te a la vista previa.

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 fotogra-ma 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-

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 es-cena. Se presentará de la siguiente manera:

En esta imagen se ve la configu-ración de la segunda vista previa “thumb2” de la galería “BRAN-DING_GAL”. La primera parada se encuentra en el fotograma 5 [co-rrespondiente 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 se-gunda vista previa, la cabeza lecto-ra se dirigirá al fotograma seis de la


45

misma escena “BRANDING_GAL”. Y ahí mostrará solo la imagen que corresponde a la vista previa, ocul-tando las otras diez imágenes has-ta que se presione la vista previa correspondiente a ellas.

Este proceso de vinculación se de-berá efectuar para cada vista pre-via. 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.

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 co-locar un botón de regreso y uno de cierre del portafolio digital siempre.

E L P R E C A R G A D O R D E C O N T E N I D O .

Realizar un pre cargador de con-tenido será útil al momento de re-producir el portafolio digital. Podría

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 ima-gen, etc.”

Pre cargador de contenido “pre-loader”. Porqué realizarlo... La res-puesta es única: porque al hacerlo, el equipo cargará todo el contenido del portafolio digital antes de mos-trar al usuario algo en pantalla que no sea el pre cargador. Esto en un portafolio que se presenta por me-dio de CD, DVD o USB y es igual-mente útil. Aunque la carga es mu-cho 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 cuan-do al reproducir el portafolio en un equipo no adecuado a las caracte-rísticas definidas al inicio, se vea lento o con interrupciones en las animaciones.

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


46

“FullScreen”, justo en el primer fo-tograma de la escena que en este caso se identificará como “PRE-LOADER”. En el pre cargador del portafolio se colocará un texto “car-gando…” 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 per-tinentes.


47

Después de agregar elementos, se accederá al panel “GUIÓN” para realizar lo siguiente [todo el proce-so será realizado en modo guiado]:

“Añadirguión>Eventos>Fotograma> enFotograma(...)”Como parámetros definir en foto-grama 1. Y colocar un “FullScreen” haciendo lo siguiente:

“Añadir guión>Navegador/Red> ComandoFS(...)”

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

Después realizar las siguientes ta-reas:

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

Activar la opción “después de even-tos para objetos colocados” y esta-blecer como fotograma el número 1.

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

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

Definir como destino “la última es-cena del portafolio digital” y en fo-tograma 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(FOTOGRAMA)”

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

Luego se definirá en un fotograma posterior [en este caso se ha colo-cado en el número 21] la indicación sobre qué hacer si la condición no se cumple. Para ello se agrega lo si-guiente:


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

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

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


48

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:


Activando la opción “Después de

eventos para objetos colocados” y luego agregando:

“Añadir guión>Fotograma>preloadContent()

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


49

Al reproducir la película se verá [según la capacidad de nues-tro equipo] que el tiempo de la ca-beza lectora en el pre cargador es casi nulo. Este límite aumentará, por ejemplo, si el portafolio digital es colocado en un sitio Web, debi-do 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 exacti-tud 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

GLOSARIO

Previo a la indagación en el tema de la investigación, el grupo ha consi-derado necesario incluir un glosario que explique conceptos de los cua-les se han hecho referencia y se uti-lizarán en los siguientes capítulos.

ANIMACIÓN:

Técnica que genera sensación de movimiento a través de una se-cuencia de imágenes o dibujos. Para realizar animación existen nu-merosas técnicas que van más allá de los familiares dibujos animados. Los cuadros se pueden generar di-bujando, pintando, o fotografiando los minúsculos cambios hechos re-petidamente a un modelo de la rea-lidad o a un modelo bidimensional o tridimensional virtual; también es posible animar objetos de la reali-dad y actores.

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 tex-to, imágenes e hipervínculos. Los nuevos contenidos se añaden vía

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

DPI:

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 impre-sora, etc. Sirve para medir la resolu-ció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 pro-ducirá un texto que mostrará líneas quebradas visibles bajo una lupa. Resoluciones aún más grandes son necesarias para obtener reproduc-ciones de fotografías suaves. Los gráficos profesionales usan impre-soras con resoluciones desde 1200 a 2400 dpi.

FORMATO:

Es una forma particular de codificar información para ser almacenado. Existen diferentes tipos de forma-

52



tos para diferentes tipos de infor-mación. Por esto existen formatos gráficos, audio, animación, docu-mentos, entre otros.

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

Muchas veces, los formatos de ar-chivos están marcados en la exten-sió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 es-crito en HTML; hay formatos espe-cíficos para imágenes (como JPEG, PNG, GIF, TIF, BMP), texto simple (ASCII, comúnmente marcado con la extensión .txt), para texto forma-teado (HTML, RTF, DOC) y para do-cumentos listos para la impresora (PDF, PS).

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

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

INTERFAZ:

Modo visual que permite al usua-rio interactuar con el hardware y el conjunto de valores de programa-ción de un sistema determinado.

INTERNET:

Es un conjunto descentralizado de redes de comunicación interconec-tadas, que utilizan la familia de pro-tocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mun-dial.

Uno de los servicios que más éxi-to 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 proto-colos que permite, de forma senci-lla, la consulta remota de archivos de hipertexto. Ésta fue un desarro-llo posterior (1990) y utiliza Internet como medio de transmisión.

53

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 con-versaciones en línea (IRC), la men-sajería instantánea y presencia, la transmisión de contenido y comu-nicación digital -telefonía (VoIP), te-levisión (IPTV)-, los boletines elec-trónicos (NNTP), el acceso remoto a otras máquinas (SSH) o los juegos en línea.

DIGITAL:

Es un término que se aplica a cualquier objeto que usa simultá-neamente diferentes formas de contenido informativo como tex-to, sonido, imágenes, animación y video para informar o entretener al usuario. También se puede calificar como digital a los medios electróni-cos (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 permi-ten mayor cantidad de receptores simultáneamente.

PIXEL:Es la menor unidad posible con la que se compone cualquier imagen digital. Las imágenes gráficas son formadas por una matriz rectangu-lar de pixeles. Para almacenar la información de una imagen, cada píxel se codifica mediante un con-junto de bits de una longitud deter-minada (llamada profundidad de color). Los pixeles también se uti-lizan como unidad para medir la re-solución de una pantalla, una ima-gen y de algunos dispositivos como por ejemplo las cámaras digitales (que utilizan los megapíxeles).

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 repre-sentados en sentido horizontal y vertical. Existen gran cantidad de re-soluciones como por ejemplo: 320 x 480, 640 x 480, 800 x 600, 1280 x 800, etc. La multiplicación de am-bos números da como resultado el total de píxeles que se representan en la pantalla.


54


SOFTWARE:

Se refiere al equipamiento lógico o soporte lógico de un computador di-gital, 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 contrapo-sició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 rea-lizar todas las tareas concernientes a edición de textos; software de sistema, tal como un sistema ope-rativo, el que, básicamente, permite al resto de los programas funcio-nar adecuadamente, facilitando la interacción con los componentes físicos y el resto de las aplicacio-nes, también provee una v ante el usuario.

SPRITE:

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

todas las propiedades y métodos del mismo.

USUARIO:

Es un individuo que utiliza una com-putadora, sistema operativo, servi-cio o cualquier sistema informático. Por lo general es una única persona. Un usuario generalmente se identi-fica frente al sistema o servicio utili-zando 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 si-tio, 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.

55


TABLA RESUMEN DE SOFTWARE ADICIONAL

56

GUIA DIDACTICA PARA DISEÑAR PORTAFOLIOS DIGITALES

Documents

Transcript of GUIA DIDACTICA PARA DISEÑAR PORTAFOLIOS DIGITALES