1GUÍA DIDÁCTICADE SITIOS MULTIMEDIA INTERACTIVOS

Introducción

Flash esta desahusiado, bienvenido HTML5

Conceptos básicos de un sitio web multimedia interactivo

¿Qué constituye un sitio multimedia interactivo?

Pasos para crear un sitio multimedia interactivo

Uso de las aplicaciones para crear sitios multimedia interactivos

Hyper Pro

Google Web Designer

Glosario

ÍNDICE

3La presente guía se creó con el único objetivo de servir como un apoyo para aquellos diseñadores que fueron instruidos con el software de animación y dis-eño Flash y ahora se encuentran con la problemática de la sustitución de este último con los lenguajes de programación HTML5, CSS3 y JavaScript.

En los inicios del diseño con el software Flash, se desarrollaron sitios que in-cluían multimedia y la interacción básica, no obstante no existía un término para denominarlos. Hoy en día, es posible llamarlos multimedia interactivos, debido a su estructura y funcionalidad, estos sitios han ido desapareciendo a la par que el software, no obstante existen soluciones alternas para poder crearlos.

Al estudiar estas soluciones se llegó a la conclusión de que con el apoyo de de-terminadas aplicaciones de escritorio es posible crear sitios con elementos como textos, imágenes, videos, audio y animaciones, en conjunto con elementos in-teractivos que sumerjan al usuario en sitios llamativos y atractivos, con los que pueda establecer una relación recíproca, de acción reacción.

INTRODUCCIÓN

4

Flash esta desahusiado, bienvenido HTML5Adobe Flash, programa creado en 1996, era la herramienta por excelen-cia. Al permitir la creación de imáge-nes vectoriales, inserción de imagen, texto y animaciones además de faci-litar la inserción de video y audio.

Algunas de las aportaciones del software fueron la introducción de animaciones y movie clips, lo que permitió el dinamismo en los sitios. La inclusión de efectos especiales como galerías dinámicas, efectos de

sonido, texto o imágenes, implemen-tación de otras páginas o ventana a elementos web dentro de la misma página. Flash ha caído en desuso por distintas razones entre ellas el peso de sus archivos y la carta de Jobs.

Lenguaje por excelencia para la estructuración de sitios web semánticos,

Adobe Flash Player es una aplicación informática del género reproductor multimedia.

Etiqueta iframe o mediante el reproductor de flash, Adobe Flash Player o Microsoft Silverlight.

Posibilidad de reproducir audio de forma nativa, es decir no es necesario ningún plugin.

Mezcla de audio en tiempo real. Posibilidad de reproducir video de forma nativa, es decir no es necesario ningún plugin.

Los buscadores no leen el contenido de manera correcta, ya que solo son gráficos y no hay textos.

El contenido en HTML es indexado fácilmente por los buscadores, por medio de metadatos.

El peso de los archivos es superior, y por lo tanto la carga es más lenta.

El peso se disminuye de una manera considerable, ya que solo son letras que interpreta el servidor.

No procesable en dispositivos móviles.Diseño responsivo y el diseño adaptativo, apoyado por las media queries, css y la detección de dispositivos de JavaScript.

No es un estándar abierto, tiene su propios desarrolladores, y está limitado.

Es un estándar abierto, no dependan de terceros y además es gratuito.

Mayor exigencia al sistema, las páginas Flash consumen más recursos del equipo.

No consume recursos del equipo, ya que se encuentra cargado en un servidor externo.

Las animaciones mediante interpolación cuadro por cuadro y tween, con frames intermedios.

En HTML5 se puede realizar animaciones por medio de código JavaScript o CSS.

Problemas de seguridad, detectados por SymantecHTML5 cuenta con un gran número de opciones para la seguridad en la red.

5

Una buena solución son las:APLICACIONES DE ESCRITORIO

VENTAJASIncorpora nuevas etiquetas

Web SemánticaSEO y Accesibilidad

Carga de elementos en segundo plano

Funcionalidades Adicionales

Etiquetas para manejar conjuntos de datos

canvasaudiovideosvg

headersectionarticlefooter

Datagrid

Drag & DropGeolocalización

DetailMenu

Command

En resumen...

Visualización en dispositivos móviles, en donde HTML5, CSS3 y Java Script, han resaltado por su cualidad de ser responsivo, adaptable y contar con de-tección de dispositivos

Seguridad, HTML5 cuenta con un gran número de forma de bloqueo que bien aplicadas mantienen se-gura la red.

Indexación, con ayuda de HTML5, los navegadores localizan la infor-mación a través de meta datos y la estructura semántica.

Los lenguajes de código, fueron apo-yados por Steve Jobs, incluso en la misma carta que dió muerte a Flash.

Es posible resumir en 4 puntos las razones para utilizar HTML5

Las aplicaciones de escritorio surgen como sustitutos de los progra-mas que instalaban en el ordenador, que regularmente se obtenían en discos o dvds. Las aplicaciones tienen menor peso, consumen menor cantidad de recursos y tiene la propiedad de almacenamien-to de datos en un servidor web.

Al estar en la nube se pueden instalar en cualquier computadora y acceder a los datos en la nube, al abrir sesión. En este caso las aplicaciones de escritorio se enfrentan a la creación de versiones distintas según el sistema operativo, no obstante son flexibles.

Este tipo de aplicaciones, tiene numerosas formas de uso, una de ellos son los generados, en donde apartir de una interfaz se van dando instrucciones, que la aplicación interpreta para aportar al final un archivo en código. Dicho archivo e interfaz son perfectos para utilizarse como sustitutos de Flash.

6

Conceptos básicos de un sitio web multimedia interactivo

El concepto se define como el inter-cambio de información realizado entre un usuario que introduce un comando y una máquina que interpreta y ofrece una respuesta a dicho comando, crean-do un sistema de acción reacción, so-portado en un dispositivo técnico.

“La finalidad básica de cualquier recurso interactivo, sea cual sea, es que pueda ser utilizado por el usuario” Laura Solanilla

“La interfaz de usuario como puente entre el hombre y la computadora” Hechavarría

VENTAS EN LÍNEA

EDUCACIÓNPROMOCIÓN

Uso simultaneo de medios de co-municación, como son la imagen o gráficos en general, texto, sonidos, videos y animación, reproducidos por aparatos analógicos o digitales, con la funcionalidad de comunicar.

MULTIMEDIA INTERACTIVIDAD

DISEÑO DE INTERFAZ

FINALIDAD

debo decidir

TECNOLOGÍA

MULTIMEDIAINTERACTIVA

7

El usuario requiere que el dispositivo se comunique con

él de algún modo, y puedan entenderse mutuamente

Es necesario cumplir con las exigencias del usuario, con un

producto pensado especialmente para él, y que al mismo tiempo

sea sencillo e intuitivo.

MULTIMEDIA INTERACTIVA

IMAGEN

TEXTOS

VIDEO

IMAGEN

ANIMACIÓN

Combinación de texto, imagen, animación, audio y video; producida, controlada y mostrada por aparatos analógicos o digitales, y el usuario tie-ne libre control

La interactividad, permite la reciprocidad entre la máquina y el usuario, qué es lo que quiere ver y cuándo.

La transparencia, El usuario no debe ser consiente del disposi-tivo, solo de la interfaz.

La ramificación, Involucra la estructura-ción de la información, para tener multiples ca-minos al navegar.

La navegación, serie de enlaces que permi-ten la movilidad por la información.

Navegación jerarquizada- libertad

de selección por parte del usuario y organización de la información atendien-

do a su contenido.

Multimedia Interactiva,

8

¿Qué constituye un sitio multimedia interactivo?

Video

MULTIMEDIA INTERACTIVA

SITIOS MULTIMEDIA INTERACTIVOS

MULTIMEDIA

AUDIO

VIDEO

IMAGENUSUARIO

INTERFAZ

NIVEL ALTO DE INTERACCIÓN

TEXTO

ANIMACIÓN

INTERACTIVIDAD TECNOLOGÍA

SERVIDORWEB

SITIO WEB

FUNCIONALIDAD

Los sitios multimedia interactivos, agilizan la memo-ria visual, la comprensión, la memoria auditiva, entre otros, capacidades que entran en acción al incursio-nar tantos medios en un mismo sitio para comunicar el mismo mensaje, siendo cada medio una forma de reforzar las ideas que se plantean compartir.

Se debe saber la forma de pensar, actuar, el rango

de edad, sexo, nivel socio económico del usuario

INTERACCIÓN

TRANSPARENCIA

RAMIFICACIÓN

NAVEGACIÓN

JERARQUIZADA

El mapa conceptual mostrado a continuación sintetiza el concepto de un sitio multimedio interactivo, en elementos individuales, que al converger en un solo proyecto dan como resultado un sitio multimedia interactivo.

9

Manipulación de la información, con niveles múltiples de acceso, ramificación y uso am-plio de hipertexto e hipermedia, esto hace referencia aun navegación aleatoria.

Transmite información mediante el uso de más de un medio de comu-nicación como textos, imágenes iconográficos-verbales, sonidos, videos y animaciones.

Fomenta la participación del usua-rio, este último decide la forma, or-den y ritmo para obtener los resul-tados, por medio de procesos como la toma de decisiones.

Ejecución de tareas mediante la manipulación de dispositivos y las reglas de la interfaz de usuario.

Ambos, usuario y máquina asumen los ro-les de emisor y receptor de información, se considera que para que un sitio sea consi-derado multimedia interactivo, debe respe-tar un nivel altamente interactivo.

MULTIMEDIA

NIVEL DE INTERACCIÓN MULTILINEALIDAD

INTERACTIVIDAD MEDIACIÓN TECNOLÓGICA

NIVEL ALTO DE INTERACCIÓN

• Navegación ramificada

• El sistema responde de forma personalizada

• Uso de chats y foros, diálogos a larga distancia

• Relación máquina y usuario simulando diálogo humano

• Reacción simultanea

Características de un sitio multimedia interactivo:

10

Pasos para crear un sitio multimedia interactivo

EDUCACIÓN

EDUCACIÓN

Para crear un sitio web multimedia interactivo lo principal es la planea-ción. Ya que solo conociendo los contenidos y objetivos es posible crear y colocar los materiales en el lugar correcto.

En esta guía, te presentamos tres aplicaciones de escritorio, con la que se pueden realizar numerosas tareas, que anteriormente solo eran posibles con el software de anima-ción Flash.

Sin embargo, el primer paso para crear cualquier sitio web, es saber que se va a hacer, de tal modo que estos son los pasos para crear un sitio web, en este caso uno de tipo multimedia interactivo:

En el caso de la ramificación siendo en sí misma una característica básica, de la multimedia interactiva, es el desglose de los conteni-dos en jerarquías para trazar las diversas rutas en las que podrá incursionar el usuario.Éste desglose deriva en un mapa de navegación que eventualmente establecerá el menú presente en la pantalla

1

2

ESTABLECER LA IDEA

RAMIFICACIÓN DE CONTENIDOS,

Tema:

Público:

Funcionalidad:

Se pueden tener numerosas acepciones en torno a una idea, sin embargo, el tema sostiene el ámbito principal a tratarse y el con-texto donde se utiliza. Para crea un sitio web de cualquier tipo en necesario tener presente un tema.

Se debe tomar en cuenta (Sexo, nivel socio económico, nivel de edu-cación, ocupaciones y edades), en algunos casos incluso creencias y religión, así como, su forma de expresarse, su lenguaje, modismos, cultura, que permitan la creación de un ambiente que resulte natu-ral, y permita anticipar las reacciones, superar expectativas.

Se resume en el objetivo que tendrá el sitio web, es decir establecer la forma en la que se pretende reaccione la audiencia y lo elemen-tos que debe contener para satisfacer los gustos y necesidades de los usuarios.

11

EDUCACIÓN EDUCACIÓNEDUCACIÓN3

4

5

BOSQUEJO

CREACIÓN DE LOS COMPONENTES

ARMADO DEL SITIO WEB MULTIMEDIA INTERACTIVO.

Es necesario realizar un bos-quejo de la ideas gráficas, funcionales e interactivas que se desean obtener.

Para crear un sitio multimedia inte-ractivo es necesario crear los com-ponentes por separados, es decir, si se requiere un video o un audio este debe ser manipulado y creado de manera externa.

En el caso de las animaciones y en algunos casos los videos, estos pueden ser creados desde la herramienta que se esté utilizando.

Se deben considerar las herramientas que dispone la herra-mienta elegida, para la creación del sitio, es decir, los menús, botones, o herramientas adicionales que presenta para el desarrollo del proyecto, en este caso se proponen dos.

En el caso de la apariencia gráfica un mock-ups es ideal para tener una idea clara de la apariencia visual, y el tipo de interfaz, que debe presen-tar el proyecto.

También se debe tomar en cuenta el servidor en el que se guardará la aplica-ción, se debe tener contra-tado un dominio

Algunos de los componentes que se deben tomar en cuenta son los textos y las imágenes

La funcionalidad comprende en crear sistemas que satis-fagan las necesidades de los usuarios de forma espontánea y satisfactoria, procurando que sea intuitiva.

12

HYPE PROHype Professional es la aplicación de escritorio, para crear

impresionantes animaciones e interactivos para web.

Nombre: Hype Pro

Creador: Tumult Inc.

Sitio: http://tumult.com/

Tipo de aplicación: Aplicación de escritorio

Etapa de desarrollo: 3.6 Professional

Compatible: iOs

Nivel de código que se debe saber: No necesitas saber, puedes incrementar su funcionalidad si conoces códigos de programación como JavaScript.

Precio:

• Tumult Hype 3.6 Standard, el constructor de animacio-nes para OS X. tiene un costo de $49.99 USD.

• Tumult Hype 3.6 Professional (Full), la edición completa de Hype 3 con todas las características desbloqueadas con un precio de $99.99 USD.

• Tumult Hype 3.6 Professional (Upgrade only), el actual dueño de Hype 3 puede desbloquear las características pro, con un precio de $49.99 USD.

Necesita login: Se necesita registrar para utilizarlo y guardar los proyectos en la nube.

Tiene documentación: Tiene un apartado de soporte donde se puede aprender a usarlo, posee preguntas fre-cuentes, una documentación y tutoriales.

Tipo de código generado: Genera código HTML5, utiliza algunas librerías, código JavaScript y CSS.

Ayuda al aprendizaje de código: Tiene tutoriales en los que explica cómo puede utilizarse el código generado, para anexarlo a códigos pre hechos.

Se compone de 3 herramientas base:

• Tumult Hype 3 (crea impresionantes animaciones e inte-ractividad, contenido HTML5)

• Hype Reflect (rapido previsualizador y para pruebas de los productos Hyper, en iOS)

• Hyper Edit ( Permite editar HTML y PHP con un visuali-zar en tiempo real y actualiza lo que escribes)

13

Pantalla principal:

Hype es un programa para elaborar elementos multimedia para la web, por lo que posee numerosas herramientes que ayudan a la creación de sitios multimedia interactivos además de contar con la la ventaja de ser actualizada continuamente.

DISEÑOSSe pueden elegir las versiones de pan-talla, para las cuales se diseñará.Hype tiene la ventaja de ser compatible tanto con versiones de escritorio y ver-siones móviles como iPhone y Android, con un peso ligero comprimido.

-carga escena-deshacer carga escena- si tecla presionada-si tecla abajo-si tecla arriba

- al deslizar a izquierda- al deslizar a derecha- al deslizar arriba- al deslizar abajo

ESCENASEs posible desplazarse entre pantalla y panta-lla, es muy parecido al uso de layer o labels. Dentro de esta opción es posible establecer el flujo de anima-ción, además Hype tiene una variedad de acciones que permiten cambiar entre escenas.

Algunas de las funciones preestablecidas son:

TIMELINE

Los elementos conforme son anexados en el programa, van creando layers, que pueden cambiarse de posición.Dichos layers pueden ser animados y manipulados de forma sencilla, para crear animaciones con fotogramas automáticos.

BARRAS DE PROPIEDADES

La aplicación cuenta con 8 barras de propiedades (documento, esce-na, medidas, elemento, tipografía, acciones, física e identidad) que determinan cualidades del proyec-to. Es posible manipular medidas y posiciones de los elementos en el escenario, propiedades del texto, acciones y funciones, propiedades físicas como densidad y peso e identidad, que permite añadir clases y id a los elementos. Debe tomarse en cuenta que el con-tenido de las barras de propiedades cambia según el elemento seleccio-nado, es decir, si el elemento es un video, dentro de la barra es posible encontrar valores de reproducción, mientras que si es un texto se podrán encontrar herramientas tipo-gráficas, principalmente en la barra de elemento.

INSPECTOR / RECURSOSInspector visualiza el desempeño de determinados elementos. Recursos funciona como una biblioteca de elementos dentro del escenario; al-macena imágenes, botnes, videos o sonidos, y permite volver a colocar un elemento o editar uno preexistente

ZOOM / VISTA PREVIA

Zoom permite acercar o alejar el escenario, mientas que vista previa permite visualizar el proyecto en diferentes navegadores.

POSICIÓN / GRUPOS

Las cuatro herramientas tiene funcionalidades para ordenar y organizar los elementos presenta-dos en escena.

ELEMENTOS / SÍMBOLOS

La función de estos dos botones, es añadir nuevos componentes al escenario, entre ellos; textos, imágenes, audio, videos, botones y figuras geométricas

Hyper tiene un 100% de fidelidad en navegadore,

incluso el IE 6, sin embargo cuando no hay

incompatibilidad de elementos lanza una advertencia.

14

MEDIDAS

Dentro de la barra de medidas es posible cambiar distintos aspectos visuales, como es posición y escala, así mismo permite visualizar u ocultar el contenido que se excede al tamaño de la caja o contenedor del elemento.Una de las cualidades de éste menú es que permite manipu-lar diseños flexibles, es decir, manipular las medidas de los contenidos en porcentajes.La últimas dos opciones ofre-cidad por este menú son la rotación y el origen de trans-formación, donde el origen de transformación permite cambiar de forma el objeto tomando como referencia un punto base.

DOCUMENTO

Dentro de los documentos html se encuetran datos relacionados con caracte-rística del documento, hype retoma esta cualidades y permite que este tipo de características sean editables desde la barra de propiedades del documen-to. Esto incluye en título que aparecerá en la barra del navegador, el loader, en caso de ser pesado el contenido, así como las ca-racterísticas del archivo css y las opciones de ajustes para adaptarse dispositi-vos móviles. Así como la configuración de los avisos entorno a la compatibilidad con los navegadores.

ESCENA

La Barra de propiedades de escena permite editar las cualidades de la es-cena seleccionada, comen-zando por el tamaño. Da la opción de generar puntos de interrupción, los cuales dentro del mundo del len-guaje html son referidos como mediaquerys y se encarga de colocar puntos de cambios para generar el diseño responsivo. Dentro del formato que permite dar a la escena se encuentra el color de fondo y opciones para agregar animaciones, eventos y funcionalidades a la esce-na, ya se en código o con los predeterminados.

ELEMENTO

En la barra de propiedade de elemento, como su nom-bre lo dicta se centra en las propiedades del elemento seleccionado como son el fondo o relleno, que puede ser sólido o degrados; los bordes, que pueden redondearse o cambiar de color; las sombras, que pueden colocarse en distintas partes y difuminarse.Incluso permite generar los efectos más nuevos permitido en el lenguaje css, como son filtros y cambios de color defectos a la imágen u objeto, también permite generar reflejos a partir del elemento y modificar su orientación y desplazamiento.

IDENTIDAD

El menú de identidad permite asignar cualidades única a los elementos del escenario, es decir, colocar el texto alterna-tivo que se despliega en lugar del elemento cuando la red no es ideal y el nombre con el que se identifica el elemento dentro del listado de objetos en la carpeta de assets, así como colocar identificadores id y clases.

ACCIONES

El menú de acciones será ana-lizado más adelante dentro del apartado de interactividad, sin embargo, es necesario men-cionar que permite todo tipo de interacción del programa.

Barras de Propiedades

15

TEXTOS

ELEMENTO (TEXTO)

La herramienta básica para colocar textos, se encuentra en el menú elementos/símbolos, es la primera opción, aunque también se puede usar el shortcut (T)

CUADRO DE TEXTO

El siguiente paso es colocar una caja texto, estableciendo el área aproximada de contenido a colocar, al aparecer el cursor y los puntos que delimitan la caja de texto, entonces es posible escribir.

BARRA DE TIPOGRAFÍAPara editar las propiedades del texto, es necesario tener seleccionada la caja texto, ya que de otro modo solo se esta-blecen los estilos generales, mas no los particulares del texto en cuestión.

TIPO DE LETRA

Dentro del menú de propiedades de texto se encuentra una amplia variedad de tipografías, que incluye todas las disponibles en la computadora, sin embago, es posible anexar más tipografías o solo filtrar solo las compatibles con navegadores.

FUNCIONES ADICIONALES

También puedes manipular, espacio entre letras, espacio entre palabras y altura de líneas.Así como aplicar efectos como text shadow y mani-pular la alineación de texto, para justificar, centrar o alinear derecho o izquierda.

16

AÑADIR MÁS TIPOS DE LETRA

Puedes manipular tamaño, color, peso o agregar fuente de la colección de google fonts. Una función útil para conocedores del código css es la opción css personalizado, que permite colocar declara-ciones de estilo al texto y genera el código css como si se realizara en una hoja de estilos tradicional, pero a partir de una interfaz, colocando la familia css y declaraciones como @font-face.

PRESENTACIONES DE LA PALETA DE COLOR Dentro del programa existen 5 presentaciones para la paleta de color, la primera es en forma de expectro de color, presenta los colores primarios y secundarios en secuencia, en el orden en el que se colocarían al mezclar los colores que componen CMYK y se eliga la tonalidad con solo dar click sobre la zona que contiene el color deseado, el segundo muestra variantes en la saturación al seleccionar un color inicial y aplicar negro o blanco, según sea

el caso, el tercero muestra paletas específicas como los colores de Apple o los web safe colors, el cuatro guarda semejanza con el segundo en este es posible variar saturación, pero también es posible manipular el espectro para seleccionar un color distinto y finalmente el regaliz muestra un formato amigable que simula una caja de cayones, con colore específicos, en todos ellos es posible manipular la opacidad del color.

ORTOGRAFÍA Y GRAMÁTICAUna gran cualidad de la aplicación, entorno al desarrollo de textos es la capacidad de revisar la ortografía y gramática como lo harían programas como word, aunque el diccionario no es tan amplio es una gran ayuda para detectar errores a tiempo.

Notas...

Panel de selección de color

17

IMÁGENESELEMENTO (IMAGEN)Dentro del menú de elementos se encuentra la opción de insertar imá-gen, así como las figuras geométri-cas básicas de rectángulo, rectángu-lo redondeado y elipse.

CARPETA RECURSOSAl colocar un imagen dentro del proyecto ésta aparecerá automática-mente en la carpeta de recursos y es posible generar un archivo con resolución para retina, que sutituya la imagen original al detectar esta cualidad en el disposivo reproductor.

LAYERS EN LA LÍNEA DE TIEMPOAl insertar la imágen esta aparecerá en la lí-nea del tiempo, como elemento animable, es posible desplazarla hacia arriba o hacia abajo (como ocurría con los layers en el software de animación Flash), para posicionar el elemento al frente o detrás del resto de los componentes.

PROPIEDADES EDITABLESEn el menú del elemento, que se obtiene al seleccionar un objeto del escenario, es posible modificar las propiedades del mismo.En imágenes se cuenta con 5 propiedades a modificar:

BORDEGenera un borde al cual se le puede modificar la anchura, estilo y color. También es posi-ble redondear los bordes con el radio o generar un margen entre la figura y el borde.

VISIBILIDADModifica la opacidad del objeto y tiene la opción de encender o apagar la visua-lización, esta cualidad sirve para animaciones o efectos de aparición.

EFECTOS DE FILTROLos filtros modifican las propiedades de co-loración de la imagen, permite manipular la saturación, matiz, brillo y contraste, así como difuminar, para generar efectos de marca de agua o cambiar la coloración a sepia.

SOMBRAAl colocar la sombra esta tie-ne la propiedad de modificar el tamaño, color y el difumi-nado o blur.

REFLEJOEl reflejo coloca una copia de la imágen original en perspectiva, permite modificar la profundiad y el desplazamiento del reflejo generado.

EXPLORADOR DE ARCHIVOS

Tras dar click en el elemento imagen este desplegará el explorador de archivos, con la finalidad de buscar y elegir la imágen deseada.

Al incertar una imagen en automático genera un campo llamada Retina x2. Para poder ingresar una imagen con cualidades retina se debe guardar una imagen con el doble de resolución de la imágen original, esta imágen debe tener el mismo nombre que el primer archivo, pero agregar al final @x2 es decir:ORIGINAL = marine_life04.jpgRETINA = marine_life04@x2.jpgPosteriormente en la ventana recursos se da click en el campo llamada Retina x2, en la parte de abajo aparecerá un botón leyenda Añadir fuente, al desple-garse la ventana del buscador se debe localizar el archivo generado para retina y en automático quedará como un ele-mento que se desplegará el dispositivos con mayor densidad de pixel.

Para generar archivos retina

18

AUDIO

CARPETA DE RECURSOSDentro de la carpeta de recursos se localizarán los audios insertados, es posible colocarlos en formato mp3, h264 y ogg, para mejorar la lectura de los navegadores

ACCIONES PARA REPRODUCIR SONIDOSExisten algunas acciones que pueden desenlazar la reproducción de un sonido, entre ellas está: al cargar escena, si se presiona una tecla, al deslizar a izquier-da, derecha o arriba, arrastrar y compor-tamientos personalizados.

ELEMENTO (AUDIO)Así como en los dos anteriores, el botón para insertar el audio se encuentra en el menú de elementos

EXPLORADOR DE ARCHIVOS

Tras dar click en el elemento audio este desplegará el explorador de archivos, con la finalidad de buscar y elegir el audio (solo los formatos compatibles permanece-rán con letra negra, el resto de los archivos se verán en tonalidad gris) .

Al incertar un audio se genera un campo audio/ogg. Se debe guardar el audio en formato ogg, de forma externa, este último debe tener el mismo nombre que el primer archivo, es decir:ORIGINAL = burbuja_1.mp3OGG = burbuja_1.oggPosteriormente en recursos se da click en el campo audio/ogg, en la parte de abajo aparecerá un botón con la leyen-da Añadir fuente, al desplegarse la ventana del buscador se debe localizar el archivo generado en versión ogg y en automático quedará como un elemento que se desplegará en dispo-sitivos no compatibles con mp3.

Para generar una versión de compatibilidad (ogg)

AUDIOSolo puede ser desplegado a partir de acciones, es decir solo pueden reproducirse en respuesta a presionar un botón o el despliegue de escenas.

Notas...

BOTÓN CREADO POR DEFAULTLa función por default al insertar un sonido es generar un botón que despliega el sonido al ser presionado, en el menú de propiedades del elemento no es posible modificar más que las cualidades del botón generado para reproducir el sonido (como controlador), ya que el audio no tiene cualidades visuales

19

FORMATOS DE VIDEO Y CONTROLADORESAsí como en la carpeta de recursos, en el caso de video es posible colocar los distintos formatos de video para compatibilidad, pero en este caso se cuenta con un botón específico para buscar el archi-vo, los formatos compatibles son .mov, .ogg, .ogv, .webm, .mp4, y .m4v.También cuenta con 5 controladores adicionales a los colocados en el video por default (reproducción automática, insertado iOS, silenciado iOS, controles y bucle), en el caso de querer un video de fondo que se reproduzca de forma automática, es posible des-activar controles y activar bucle.

MODIFICAR PROPIEDADES DEL VIDEO A los videos se les pueden modificar las mismas propiedades que a las imágenes, pero se debe tener selec-cionado el video. Las propiedades modificables se muestran en la barra de elemento (fondo, borde, visibilidad, efectos de filtro y reflejo)

VIDEO

PISTA DE VIDEOLa pista de video permite visualizar las escenas que componen este último y es posible posicionarse en determinada parte, para desenlazar acciones o suce-siones de eventos, estó desplazandose mediante la manipulación del indicador.

ELEMENTO (VIDEO)

Así como en los tres anteriores, el botón para insertar el video se encuentra en el menú de elementos, este desplegará el buscardor y solo mostrará en negro aquellos formatos que sean compatibles.

Al incertar un video se genera un campo video/ogg y video/webm. Se debe guardar el video en formato ogg y webm, de forma externa, este último debe tener el mismo nombre que el primer archivo, es decir:ORIGINAL = Un_paseo_bajo_el_mar.mp4OGG = Un_paseo_bajo_el_mar.oggWEBM = Un_paseo_bajo_el_mar.webmPosteriormente en recursos se da click en el campo video/ogg y video/webm, en la parte de abajo aparecerá un botón con la leyenda Añadir fuente, al desplegarse la ventana del buscador se debe localizar el archivo generado en versión ogg o webm y en automático quedará como un ele-mento que se desplegará en dispositivos no compatibles con mp4.

Para generar una versión de compatibilidad (ogg y webm)

VIDEOPara convertir un video a los distintos formatos se puede utilizar “Miro Video Converter”, es gratuito, simple y efectivo.

Notas...

INDICADOR

20

ANIMACIÓN

FUNCIONES DE SINCRONIZACIÓN DE ANIMACIÓNDentro de la animación, es posible modificar la cur-va de animación, para crear efectos más realistas por medio de funciones de sincronización como son (lineal, aceleración, desaceleración, rebote, elásti-co, detrás).

CONTROL TEMPORALEs el nombre que se le da a la ani-mación guardada, como una peque-ña película, con este nombre es po-sible referenciar la animación para reproducirla en correspondencia a determinadas acciones.Con la pestaña alojada dentro del timeline es posible generar diver-sas animaciones o controles tem-porales, como son llamados dentro de la aplicación.

PROPIEDADES ANIMADASEn la parte posterior de la línea del tiempo es posible visualizar las propiedades animables, simi-lar al programa After Effects, se visualizan los frames y es posible modificar el timing

ACCIONES Y CONTROL TEMPORALEn el botón generado por de-fault, es posible añadir una acción que despliegue la ani-mación, para ellos se debe elegir una acción, entre las exitentes en el menú accio-nes y dentro elegir la opción de iniciar control temporal, que deplegará el compen-dio de controles temporales existentes, ahí se debe se-leccionar el nombre dado a la animación en cuestión.

CONTROL DE ANIMACIÓN CON BÉZIERLa herramienta de bezier permite modificar de forma manual la curva de animación y delimita la trayectoria en cambios de posición o transiciones.

PARA ANIMAR1.- Se debe posicionar el indicador en el tiempo de duración de la animación. 2.- Presionar el botón de grabar, este se cambiará a color rojo, como se indica en la foto.3.- Una vez accionado, los cambios que se realicen se grabarán como frames de animación, los cambios se pueden realizar directo en el elemento o mediante la barra de herramientas de Medidas y Elemento.4.- Para nuevos cambios se debe volver a posicionar el indicador en un nuevo punto de la línea del tiempo y volver a repetir los pasos anteriores.5.- Al terminar de animar se debe presionar el botón de grabar, para finalizar la graba-ción, el botón regresará a su forma original.

MOVERSE ENTRE CONTROLES TEMPORALESEl indicado de las dos flechas permite moverse entre los con-troles temporales, de esta for-ma se observa una u otra de las líneas temporales en las que se almacenan las animaciones.

21

CONTROLES TEMPORALES DE ANIMACIÓNDentro del menú escena se mues-tran todos los controles temporales creados y el tiempo de duración de cada uno, almacenados como pe-queñas películas que pueden ser llamadas con distintas acciones, en este mismo menú es posible crear nuevos controles temporarles, eli-minarlos o duplicarlos.

PROPIEDADES DEL ELEMENTONo solo las propiedades de posición, escala y rotación son animables, tam-bién es posible animar la aparición de los bordes, la visibilidad, la sombra, los efectos de filtro, el color de fondo y el efecto de reflejo.La animación de estas propiedades pueden generar animaciones de apa-riencia elaborada con poco efuerzo, además de efectos de entrada, salida o resalte de elementos.

PROPIEDADES BÁSICAS ANIMABLESLas principales propiedades a animar se encuentran en la barra de herramientas Medidas, donde se puede modificar por medio de la interfaz.Algunas de ellas son la posición, es-cala y rotación, dentro de rotación se encuentra el ángulo z, lo cual permite simular animaciones 3D, pero para ellos se debe activar la casilla “La rotación sigue al movimiento“.

En caso de tener lista una animación y no desear que esta sea modificada, la mejor opción es utilizar el candado, el cual bloquea el layer y evitar que se modifique.

Si se desea generar una animación, pero se tienen varios layers activos que compliquen la visibilidad, una opción es utilizar el botón de ocultar, al presionar este botón el layer en cuestión quedará oculto, no se borrar y podrá ser modificable, pero no será visible, de tal modo que fácilitara el trabajo, sin alterar al resto de los elementos en el espacio de trabajo.

Recomendaciones...

PROPIEDADES DE ESCENAAsí como es posible desencadenar animaciones a partír de acciones añadidas a un botón, es posible que se desplieguen por la acción de car-ga de escenas, presionar una tecla, deslizarse dentro de la pantalla o arrastrar un elemento. Dentro del menú escena se puede añadir la ac-ción de iniciar control temporal, uti-lizando el mismo procedimiento que se describió en el menú acciones.

22

INTERACTIVIDAD

ACCIONES DEL BOTÓNAcciones, interactividad, el usuario puede agregar sonidos o funcio-nes de JavaScript, en respuesta a acciones como clic de ratón, toque de eventos, tiempos específicos o eventos del documento.

TIPOS DE CURSOREn el panel de propiedades de acciones, se en-cuentra la opción de cursor, donde se puede ele-gir el tipo de cursor que ayude al usuario a darse una idea de la acción que realiza el botón, como es el puntero para dar click.

TIPOS DE BOTONESAmbos botones aparecen en el espacio de diseño, con un click en el menú de elementos. La diferencia entre ambos es que un cuenta con un fondo sólido, mientras que el segundo posee un fondo con gradiente. Es po-sible cambiar las cualidades de ambos botones desde la barra de propiedades de elemento

BOTONES DE ESTADOUna ventaja del uso de esta aplicación, es que al presionar el botón creado, este muestra las opciones de estado. De tal modo que se puede personali-zar la apariencia de su estado normal, sobre y presionado, si no se personaliza, este tomará el formato default.

BOTÓN / BOTÓN CON TEXTURA

Al igual que los elementos anteriores, es posible localizar la herramienta para colocar botones en el menú de elementos.Se cuenta con dos opciones botón y botón con textura

Primero se elige la acción que desencaderá la funcionalidad, se cuentan con varias opciones de funcionalidades y si se cuenta con conocimientos adicionales de código JavaScript, es posible lograr infinidad de resultados.

23

Nota...

FUNCIONALIDADES PARTICULARES

Las acciones que llevan al editor se encuentran en la barra de propiedades de escena y de accio-nes. El editor ya cuenta con funciones Jquery, pre cargadas, y algunas de la misma aplicación, y se muestran en la parte baja del editor.Desde esta ventana es posible escribir cualquier instrucción, como se haría en una hoja de script.

JAVASCRIPT

FÍSICA

Dentro de Hyper es posible colocar hojas JavaScript, como se mencionó en las acciónes para interactividad

Se elige la opción de ejecutar JavaScript, dentro del programa ya existen algunas funciones, si no se desea usar alguna se da click en la fecha que te lleva al editor

Con la biblioteca puedes ver todas las funciones JavaScript ocupada o puede agregar algunas externas a tu proyecto.

Dentro de las propiedades de Hype esta el menú de física, donde es posible manipular estados dinámicos de los elementos, es decir, no son animaciones propiamente dichas, al no estar previamente programadas, por el contrario reacciona de acuerdo a las condiciones presente en el momento del desarrollo.

También se deben colocar elementos con física para crear barrerás o puntos en los que la física surta efecto. Este tipo de efectos tiene un mejor funcionamiento en dispositivos móviles debido a su ágil desplazamiento.

Algunas de las propiedades que es posible modificar son: • La densidad, que implica el peso del objeto.• El rebote, que es la elasticidad del elemento, es decir, el efecto que tiene al colisionar con otro.• La fricción también está relacionada con la colisión y la resistencia que tienen los objetos al chocar unos con otros, para simular materiales.• El arrastre del aire, es proporcional a su capacidad de flotar o levitar, aunque esta muy relacionado con la densidad o peso que se observa.

24

Entre los elementos que se pueden agregar, se encuentran los mapas donde solo es necesario colocar la url o iframe y Hype hace el resto.Un ejemplo de ello es que se pueden colocar direcciones con Google Maps, como se observa en la imágen.

Widget HTML

WARNING

EXPORTAR A HTML5

SÍMBOLOS

DISEÑO ADAPTABLE

La última herramienta en el submenú de elementos es Widget HTML, este sirve para agregar links externos, iframes o incluso fragmentos de có-digo que se necesiten utilizar.

Hyper cuenta con advertencias que ayudan a mantener una buena compatibilidad con los navegadores y dispositivos móviles.

Hyper Pro permite exportar los proyectos en carpetas con archivos HTML5, carpeta de assets y los scripts pertinentes.

Una semenjanza importante de Hyper con Flash es el uso de sím-bolos “symbols“, que permiten generar funcionalidades o colocar propiedades en un solo objeto y luego reproducirlo, de tal modo que evita la repetición de tareas y agiliza tiempos.

Para ayudar en las propiedades responsivas de los sitios, Hyper permite generar diseños de acuerdo a los dispositivos, con variantes según el ancho en pixeles de la ventana de visualización, en código equivale a media querys o puntos de interrupción, según sea el caso.

25

Observaciones adicionales

- Permite el uso de física que reacciona a las interacciones del usuario, ya sea en móviles y en aparatos de escritorio.

- Es posible crear un menú, pero no tiene una herramienta planificada para ello, solo se puede poner un conjunto de botones que lleven a escenas o URLs y los menús para dispositivos móviles serían un problema.

- Solo está disponible para MAC.

- Se integra con Dropbox y sincroniza con la nube.

- Con el apoyo de Hype Reflect es posible visualizar simultáneamente en dispositivos móviles de Apple que se crean con Hyper, también permite visualizar el funcionamiento de código PHP en tiempo real.

- Pre visualiza simultáneamente las animaciones creadas, en dispositivos móviles de Apple.

- Tiene varias opciones para manipulación de layers flexibles

- Los formatos que permite:

• sonidos (mp3, ogg, wav)• textos (permite anexar fuentes)• imágenes (jpg, gif, png)• videos (mp4, ogv, webm)

Ventajas: • Permite crear sitios con varias páginas con interactividad.y multimedia.

• Tiene un gran parecido a Flash, incluso en la conversión a símbolos.

• El uso de física incrementa la interactividad y pueden crearse juegos simples a través las acciones y la física.

• Tiene soporte a varios navegadores.

• Se pueden agregar funciones Java Script.

Desventajas: • No permite vectorizar.

• Es necesario instalar la aplicación en el dispositivo y aunque no pesa demaciado, su funcionamiento depende del rendimiento del equipo en el que se instala.

• Tiene auto-formas muy limitadas.

26

Google Web Designer

Nombre: Google Web Designer

Creador: Google

Sitio: https://www.google.com/webdesigner/

Tipo de aplicación: Aplicación de escritorio

Etapa de desarrollo: Versión 1.5.0

Compatible: Mac 10.7.x or later, Win 7 or later, Linux (Debian/Ubuntu/Fedora/openSUSE).

Nivel de código que se debe saber: No necesitas saber, puedes incrementar su funcionalidad si conoces códigos de programación como JavaScript.

Precio: Gratuita

Necesita login: No es necesario registrarse

Tiene documentación: En el menú features, coloca al-gunos videos para saber cómo utilizar las herramientas básicas de la aplicación, sin embargo, no ahonda mucho con los temas.

Tipo de código generado: Código HTML5, CSS3, Java Script con códigos minificados y una base de datos Json.

Ayuda al aprendizaje de código: Tiene un editor de códi-go, parecido a los sniplets de Flash, se puede tomar códi-go JavaScript pre-creado o anexar el propio. Así mismo tiene una vista para checar como se va formando el có-digo, conforme se realizan las acciones.

Google Wen designer es una aplicación de escritorio, para crear interactivos basados en HTML5, diseño y motion Graphics, que puedan ser reproducidos en cualquier dispositivo.

27

Te permite enfocarte en el diseño y despreocuparte en el manejo de HTML5 y CC3, permite crear diseños completos que se acoplan a tus proyectos, no obstante si te siente listo para usar código, puedes utilizar el editor integrado que te permite modificar de forma manual el código, ya que en ningún momento se bloquea el acceso a las funcionalidades.

Ya que es una creación de Google permite integrar

algunos programas hermanos como:

Google Drive, DoubleClick Studio,

y AdWords.

Pantalla principal:

Ventana de inicio

Elegir el tipo de archivo que se va a desarrollar, contiene distintos tipos de archi-vos, originalmente se creó el programa para desarrollar anuncios web (banner y expandibles), sin embargo, ya es posible desarrollar archivos (HTML, HTML con páginas, CSS, JavaScript y XML).

En éste caso se elegirá un archivo HTML con páginas, desde esta primera panta-lla es posible elegir el tipo de animación, que puedes ser rápida o avanzada, para el proyecto se recomienda usar la opción avanzada.

CAJA DE HERRAMIENTASGoogle Web Designer, cuenta con varias herramientas para edición y manipulación de ele-mentos. La caja de herramien-tas controla el menú superior, es decir, este cambia según el elemento seleccionado en la caja de herramientas, como se podrá ver en la siguiente página.

MENÚ DE PROPIEDADES Y COMPONENTESEste compendio de 7 menús individuales contiene las herramientas necesarias para manipular las propiedades de los elementos en el escenario, así como agregar nuevos componentes.

CRONOLOGÍATal como su nombre lo indica manipula la suceción cronológica de los even-tos dentro del escenario, debido a ello es de gran ayuda para generar ani-maciones, también permite que determinadas acciones o eventos se desen-cadenen, o que los elementos entren en escena en un tiempo determinado.En esta barra aparecen todos los elementos incluidos en el documento y permite manipularlos como layers.

MENÚ SUPERIOREste menú cambia continuamente de contenido, ya que depende com-pletamente de la herramientas seleccionada en la caja de herramientas, aunque su contenido por default son los controles de transformación, que ayudan a acomodar los elementos dentro del área de trabajo

VISTA DEL DOCUMENTOTiene distintas visualizaciones; la vista diseño muestra el contenido visual, vista código el código generado, vista previa abre una pestaña del navegador y muestra una vista previa del proyecto, por último publicar permite ex-portar el proyecto de forma local o en el Drive de Google

28

CAJA DE HERRAMIENTAS Y MENÚ SUPERIORComo se mencionó en el apartado anterior, estas barras responden de forma simultanea, al presionar un elemento de la caja de herramientas, el menú de herramientas superior cambia de forma automática, en el esquema mostrado a continuación podemos observar el contenido que tendría el menú superior, según la opción de la caja de herramientas que se encuentre seleccionada.

Herramienta de selección, su menú superior, cuenta con herramientas para acomodo y manipulación de tamaño y posición, de los objetos en pantalla, es la barra que por default aparece al abrir el programa.

Ruta de movimiento, su menú superior cuenta con tres herramientas tienen la funcionalidad de anexar puntos o eliminarlos, dentro de la ruta de movimiento, es decir el trazo que se genera al crear una animación de desplazamiento

Herramienta de elemento, permite incluir elementos como imágenes, videos, divs o código personalizado, permite mani-pular las propiedades de los elementos.

Herramienta de (trazo, cuadrado, óvalo o línea), Cuenta con 4 herramientas que se depliegan al presionar la flecha en el esquina inferior derecha, cada una tiene propiedades distintas en el menú superior, pero se basan en propiedades de estilos de casa elemento.

Herramienta de texto, Poseé la propiedades básica de manipulación del texto, para cam-biar la fuente, estilo, tamaño, color, alineación o colocar un hipervínculo.Herramienta de (relleno, trazo y degradado) Tienes 3 herramientas que se despliegan al presionar

la flecha en la esquina inferior derecha, cada uno cuenta con su propia barra superior, pero manejan las mismas propiedades, el color de relleno o de trazo, el grosor de trazo y si lleva o no cada uno de ellos.

Herramienta de lupa, permite manipular el zoom, aunque también en la esquina inferior derecha del escenario está habilitada esta opción

Herramienta de modificación del tamaño del viewport Permite modificar el tamaño del escenario y tiene la pestaña de predefinidos donde se encuentran los tamaños de anuncios y de dispositivos más comunes, también tiene una herramienta para cambiar entre landscape y portrait.

Herramienta de rotar escena 3D y herramienta de Mano, la primera permite, como su nombre lo indica, rotar el escenario en el eje z. La herra-mienta de mano, permite moverse libremente por el escenario. Son las únicas dos herramientas que no cuentan con barra de menú superior.

Herramienta de giro y herramienta de translación de objetos 3D, estas dos herramientas son similares, ya que solo pueden utilizarse en objetos 3D y su menú superior coincide en elementos; con una herramienta global y la otra local.

MENÚ COMPONENTESEl menú componentes como su nombre lo indica contiene los componentes que pueden uti-lizarse dentro de la aplicación, muchos de ellos ya están pre elaborados y solo es necesario configurarlos en el menú de propiedades, el cual varía según el elemento que se edite.

Dentro del menú de propiedades se agregan las imágenes, se ajustan tamaños, se cambian colores y se manipula cualquier característica particular del componente.

29

Dentro del menú de propiedades y componentes se encuentra el panel de color, éste es muy sencillo y solo cuenta con una presenta-ción que engloba todos los elementos escenciales.

Relleno: Permite manipular el color de fondo de figuras, etiquetas, componentes y elementos dentro del escenario.

Se pueden colocar colores en código hexadecimal o en RGBA, el alfa se puede manipular aparte desde la barra de deslizamiento en la parte inferior.

Los círculos indican si llevará relleno, si este será con gradiente, la horientación del gradiente y si este llevará un color en porcentaje de alfa, o con el botón de invertir es posible cambiar el orden de los colores.

Borde: Tiene las mismas propiedades que relleno, pero con la pro-piedad adicional de manipular el grosor del borde y redondez de las esquinas.

Panel de selección de color

MENÚ DE PÁGINASAl hacer click en el botón se visualizan las pá-ginas contenidas en el proyecto, en este menú se pueden crear nuevas páginas, desplazarse entre una y otra y finalmente eliminarlas, si así se desea.

ZOOMPuedes acercarte o alejarte por medio de la herramientas de lupa, no obstante, también se cuenta con la herramienta de zoom, don-de incluso se visualiza el porcen-taje de zoom que tiene.

MENÚ PROPIEDADESCambia de contenido según el compo-nente seleccionado, desde éste menú se manipulan todas las propiedades de los elementos, desde su contenido, hasta el formato visual y tamaño.

EL PROGRAMA POSEE 3 VISTAS BÁSICASVista diseño, facilita la manipulación de los elementos dentro de la interfaz.Vista código, es posible observar el código que se pro-duce con forme se realizan las acciones.Vista previa, a través de los navegadores se puede visualizar el proyecto, en tiempo real.

30

TEXTOS

PROPIEDADES DEL TEXTO

El texto cuenta con varias opciones de propiedades, se le puede agregar un id, para identificarlo dentro del archivo HTML, que obtendrá al final y desde este panel se puede modificar su posición y tamaño, translación, rotación y escala, estilo, márgenes y relleno.

HERRAMIENTA TEXTO

La herramienta de texto es similar a la encontrada en los programas de Adobe, tras presionar el botón el cursor permitirá dibujar un cuadro de texto, donde se podrá comenzar a escribir

CUADRO DE TEXTO

El cuadro de texto se dibuja dentro del escenario y a partir de el es posible comenzar con la escritura

PROPIEDADES BÁSICA DE TEXTOLas propiedades básicas de texto como la fuente (solo web safe fonts), el estilo (bold, italica y normal), el tamaño y color, se encuentran en el segundo segmento

ALINEACIÓN Y LISTASCuenta con herramientas para alinear el texto, colocar viñetas o número, según sea el caso, al crear una lista y da la posibili-dad de colocar sangrías

HIPERTEXTOSSe pueden crear hipertextos, con links a URLs, otras páginas dentro del mismo sitio o seccio-nes dentro de la misma página.

ETIQUETATe permite elegir la jerarquí del texto a colocar, puede ser una etiqueta de título o una de pá-rrafo, de este modo ya tendrá un formato y tamaño base.

31

IMÁGENES

VECTORIZAR

HERRAMIENTA DE LÁPIZ

Puedes crear tus propios diseños usando la herramienta de rectángulo, óvalo, línea o el lapiz, las cuales se localizan en la caja de herramientas.

MENÚ SUPERIOR DE LÁPIZASi se utiliza la pluma el menú su-perior mostrará tres herramien-tas, una para anexar nodos, otra para quitarlos y el lápiz normal.Desde aquí es posible manipular el color de relleno y de trazo, así como el grosor del mismo

IMÁGENCrea un campo para colocar una imagen, más no abre el explorador a dife-rencia de otras aplicaciones. la imagen debe estas colocada previamente en la biblioteca o colocar la ruta en el panel de propiedades

HERRAMIENTA DE ELEMENTOSe debe tener activa la herra-mienta de elemento para que el menú superior muestre la opción para insertar una imágen

PROPIEDADESEs posible asignar, un nombre, texto alter-nativo y especificar el tamaño desde el panel de propiedades, pero lo principal es que en este panel se debe colocar la ruta a la imagen, que previamente debe estar en la carpeta de assets.

PUNTOS DE BEZIER

Permiten modificar la cur-vatura del trazo y realizar ajustes a la figura creada.

32

AUDIO

Nota: no lee en directo los archivos de audio, por lo que es necesario colocarlos en la biblioteca y después al igual que en video en el menú propiedades se localiza el apartado de audio, se coloca en origen la ruta al audio que debe estar colocado previamente en la carpeta de assets del proyecto.

Después es posible realizar los ajustes de posición y ta-maño, de translación, rotación y escala, y su estilo visual.

VIDEO

Para colocar videos se utiliza el componente de video y en la ventana de propiedades se manipulan los as-pectos internos, es decir, se coloca un id para identi-ficarlo, y se ajustan sus propiedades.

Es de gran importancia ir a la pestaña de propiedades de video, dentro del menú propiedades, ya que desde ahí se liga el video en cuestión.

Para ligar el video se busca el campo de origen y se coloca la ruta de acceso a la carpeta, después se ajusta el tipo de controles que se utilizaran en este caso esta disponible (Reproducción automática, con-troles, bucle, silenciada, precargar)

33

ANIMACIÓN

ANIMACIÓN

Existen dos formas de animación:

Uniendo simples escenas en modo rápido o usando capas en el timeline en el modo avanzado, incluso es posible cambiar entre ambos

AJUSTE DE CURVA DE ANIMACIÓN

Para crear animaciones más realistas se puede mo-dificar la curva de animación cuenta con 9 opciones de curvar, las cuales dan una efecto más sutil a la animación, para dar un aspecto más orgánico y rea-lista a la animación

34

INTERACTIVIDAD

Uso de eventos para conectar acciones a gestos físicos y crear reacciones a eventos como presionar la pantalla, rotar, sacudir o inclinar en el caso de los móviles. También se pueden crear eventos propios desde cero.

Para crear un evento vas al menú evento localizado en la parte lateral derecha, se elige el tipo de evento si es para la página o el elementos seleccionado.

Una vez establecido esto se presiona el signo de más para generar un nuevo evento, esto disparará una ventana donde se facilitará la creación de un nuevo evento.

Primero se elige el objetivo, aquí se muestran todos los elementos que componen hasta ahora el sitio.

Segundo, eliges el evento que desencadenará la acción, en este caso pue-de ser un evento con el ratón o uno touch.

Tercero, elige la acción que deseas se realice, un cambio css, de audio, cubierta de página o personalizados, cada una de las opciones tiene accio-nes predeterminadas, principalmente cubierta de página que ofrece nume-rosas formas de cambio de una página a otra.

Cuarto, es el receptor, como en este caso se eligió como acción ir a la página siguiente el único receptor posible es la serie de páginas que se mantienen en el documento.

Quinto y último es la configuración, donde se establece el bucle, la tran-sición, duración, el movimiento y la dirección hacia la que se realiza la acción. Ya solo hace falta dar en aceptar para terminar.

EVENTOS DESKTOP

EVENTOS MÓVILES

EVENTOS BOTÓNES ESPECIALES

35

PUBLICAR EL PROYECTO

ELEMENTO INTERACTIVOSDentro del menú componentes se encuentran 5 opciones de elemen-to interactivos, uno de ellos es el calendario que permite sincronizar los evento en el Google calendar del usuario, el botón de imagen y tres elementos que fundamental-mente son para móviles, los ges-tos, el tocar para llamar o enviar mensaje y el área de pulsación, que funciona como los hotspots que se utilizaban en Flash.

OPCIONES PARA PUBLICAR EL PROYECTOHay dos formas de publicar un proyecto, la primera es desde el menú archivo, en publicar y se elige el formato de publica-ción, para este caso donde se requiere tener el código a la mano la opción ideal es publicar de forma local, pero también se puede publicar directamente en Google Drive, para poder compartirlo o tenerlo en la nube como un respaldo. En ambas formas genera una serie de carpetas con los códigos, assets y scripts del proyecto.La segunda es desde el botón ubicado en la parte superior derecha llamado Publicar, que contiene las mismas opciones que desde el menú archivo.

36

FUNCIONALIDADES PARTICULARESDISEÑO ADAPTABLE

PROPIEDADES CSS

BIBLIOTECA

Google Web Designer cuenta con dos herra-mientas principales para manipular las propie-dades responsivas y adaptativas.Una maneja los Media Queries o puntos de quiebre del lenguaje CSS y el segundo maneja los máximos y mínimos comunes en el diseño responsivo, cuando se manejan medidas en porcentaje; sirven para poner límites de tama-ño y tener control en los elementos flexibles.

Es posible manipular directamente los estilos de determinados elementos, una vez se les asigna un id o clase. En el menú lateral derecho, en el de-plegado css, aparece la opción ele-ment.style, para agregar estilos css directamente a la etiqueta, aunque es mejor colocar directamente un clase o id, si se manipulan las flechas apare-cen todos los id o clase generados en el proyecto.

Para agilizar la elaboración del proyecto, se pueden importar previamente los elementos como imágenes, audios o videos, en el Panel de Biblioteca, donde que-dan almacenados y de este modo pueden ser arras-trados al escenario en cualquier momento, también cuando se importa un archivo desde la etiqueta de imágen este quedará almacenado en la biblioteca.

37

Cuenta con 4 opciones para galerías, las cuales simplemente se arrastran al esce-nario y se personaliza mediante el menú de propiedades, desde ahí se colocan los contenidos y se ajustan los estilos de co-lor y forma.

Se pueden agregar dos tipos de mapas, el mapa regular, donde se coloca la lati-tud y longitud y muestra una locación y el Street View, que permite visualizar un lugar como si se estuviera en la calle, con la ayuda de Google Maps.

Tiene dos herramientas adicionales, una es el marco flotante o iframe, el otro el Sprite Sheet, en el primero se crear un marco a partir del cual se pueden visua-lizar otros sitios o elementos externos a partir de una URL y el segundo permite que una serie de imágenes agrupadas en una sola, se movilicen para generar una animación tipo gif.

Al agregar o crear un banner html, es posible validar su formato, tamaño y si las URLs son válidas, la herramienta de Validador de anuncios, muestra palomitas en verde o advertencias en caso de que algún elemento no esté correcto, lo que facilita el que se agregue en Google Adwords

GALERÍAS

MAPAS

VARIOS

VALIDADOR DE ANUNCIOS

38

Observaciones adicionales

- Permite manejar elementos 3D

- Tiene vista diseño, código y vista previa en el navegador

- Permite agregar eventos y funciones Java Script

- Los formatos que permite:

o sonidos (mp3, ogg, wav, aac)o textos (usa las fuentes del sistema operativo)o Imágenes (jpg, gif, png)o videos (mp4, ogv, webm)

- Permite crear animaciones con línea de tiempo o tipo gif

- Forma la interfaz de acuerdo al tipo de proyecto que se desea hacer.

Ventajas: • Te genera una carpeta con los elementos que componen al sitio web.

• Permite crear dibujos tridimensionales.

• Posee una gran cantidad de elementos pre-creados en el menú componentes, donde existen galerías, animaciones y efectos que solo necesitan adaptarse al proyecto.

• Permite ir visualizando el resultado en el navegador.

• Tiene muchas herramientas disponibles para edición de imagen y texto.

Desventajas: • Tiene un peso alto en el ordenador.

• No tiene mucho control sobre video o audio, aunque se pueden agregar a carruseles y fondos.

39

GlosarioSpread: Conjunción de dos páginas dentro de un documento impreso.

Mockup: Bosquejo de un proyecto para visualizar contenidos

Metadatos: Datos alojados dentro de un archivo html, que muestra informació y descripciones rele-vantes al proyecto, en el caso de los Metadatos en la web ayudan a la indexación y SEO.

Media Query: Etiqueta que especifica el punto de quiebre, en el diseño responsivo, dentro de la etiqueta se colocan los estilos específicos a cambiar según la cantidad de pixeles del dispositivo.

Assets: Carpeta dentro de un proyecto donde se colocan las imágenes, videos, sonidos y cualquier elemento adicional al proyecto.

Shortcut: Conjunción de teclas que reducen la cantidad de pasos para realizar una acción

Caja o contenedor: En la semantica de HTML5, como su nombre lo indica la caja o contenedor es la etiqueta que engloba una serie de elementos, lo contenedores más comunes son los divs, pero existen muchos otros dentro de la jerarquía.

@font-face: Etiqueta dentro de css que permite mandar llamar una fuente externa alojada dentro de la carpeta del proyecto

Declaraciones css: Nombre con el que se le conoce a las insctrucciones escritas en una hoja de estilos css, al declarar una propiedad de un elemento.

Retina display: Tipo de pantalla con alta densidad de píxeles

Densidad de pixel: Dato que nos permite conocer el número de píxeles que es capaz de mostrar un teléfono inteligente en una pulgada

Layer: Dentrode determinados programas y aplicaciones se pueden manipular las capas, para jer-arquizar los elementos contenidos en el escenario

Timing: Ajuste de tiempo en una animación, para generar el efecto de realismo en un personaje o elemento animado.

Viewport: La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles, y es el tamaño de visualización del dispositivo que reproduce.

Landscape y Portrait: Nombre que se le da a la visualización horizontal o vertical de un sitio o apli-cación dentro de un dispositivo móvil, que ajusta la pantalla a su orientación.

Web safe fonts: Fuentes tipográficas de uso seguro dentro de la web, se les llama así porque todos los sistemas operativos cuentan con ellas.