Kitabı oku: «Publicación de productos editoriales multimedia. ARGN0110»

Capítulo 1

Publicación de productos editoriales multimedia en web y para dispositivos móviles

1. Introducción

La World Wide Web o “amplia red mundial” es hoy día el más importante medio de publicación y distribución de información en formato de documentos multimedia de hipertexto. Como servicio de internet, permite interconectar estos documentos y ofrecerlos en tiempo real a millones de usuarios conectados desde cualquier parte del mundo, a través de un navegador instalado en un PC en un dispositivo móvil moderno.

Muchas empresas del ámbito de la información y las nuevas tecnologías han apostado por la web como alternativa a sus productos editoriales clásicos al comprender que este formato tiene un futuro muy prometedor basado en un sinfín de posibilidades y recursos tecnológicos en continuo desarrollo. El éxito, sin embargo, es todavía difícil de conseguir, y la competencia es abrumadora.

Para alcanzarlo, es fundamental seguir una metodología de desarrollo basada en el refinamiento de prototipos, consiguiendo así los niveles de usabilidad, accesibilidad y funcionalidad requeridos. Es importante comprender bien el proceso de publicación web y saber usar las herramientas y lenguajes específicos, de manera que el producto pueda ser ofrecido de manera adecuada al mayor número de personas posible.

2. Fundamentos de la publicación editorial multimedia en web

La publicación de productos editoriales multimedia en formato online, es decir, en internet, se basa en unos conceptos que son necesarios conocer para obtener el mejor resultado. En primer lugar, hay que destacar que el producto estará alojado (almacenado) en un servidor web propio o bien contratado a terceras empresas, las cuales ofrecerán el plan de alojamiento que mejor se adapte a las características del producto.

Características de tres tipos de alojamiento web. Hay páginas que ofrecen comparativas de precios en función de los servicios que se contraten, como <http://www.losmejoreshostings.com/>.

Son muchos los factores que afectan al precio de estos servicios: la capacidad de almacenamiento y transferencia de archivos, las aplicaciones añadidas que disponga el servidor, el uso de sistemas de bases de datos, las medidas de seguridad y gestión de usuarios o la capacidad de ofrecer streaming multimedia, entre otros.

Definición

Streaming

Es un término relacionado con la transmisión a través de internet de datos de audio o vídeo de forma que el usuario los disfruta en tiempo real, como un flujo continuo, a la vez que estos se están descargando. Se basa principalmente, en guardar los datos en un búfer temporal del ordenador e ir reproduciéndolos con un mínimo retardo, pero de manera continua, lo cual es una experiencia de uso positiva por parte del usuario. Es una fórmula opuesta a la descarga completa de los archivos multimedia para ser escuchados o visualizados. Lógicamente, esta técnica no es recomendable para aquellos equipos obsoletos y con conexiones de bajo y limitado ancho de banda.

Además, es necesario tener un nombre de dominio asociado a él, por ejemplo, <http://www.arteinteractivo.com>, el cual suele pagarse anualmente. Muchas veces su precio está incluido en el paquete del alojamiento. Aunque existen opciones de almacenamiento en servidores gratuitos, es una opción que no se recomienda por sus grandes limitaciones en todos los sentidos y por el uso habitual de publicidad de terceros.

Para alojar el producto multimedia en un servidor web se debe realizar una copia o transferencia de los archivos, desde el equipo local donde se ha desarrollado, al servidor. Esto puede hacerse con cualquier programa informático que permita comunicar ambos equipos mediante protocolo FTP (siglas de File Transfer Protocol o “protocolo de transferencia de archivos”). Programas muy conocidos para este fin son FileZilla (gratuito), WS_FTP, Cute FTP, Total Commander, etc. La empresa de alojamiento suministra la dirección, nombre de usuario y contraseña para realizar esta tarea, así como el acceso al panel de control del servidor que permite configurar los parámetros de ciertos servicios.

Otro tema es el uso de los componentes tecnológicos que garanticen las mejores características funcionales e interactivas. En este sentido, la base de todo producto publicado en internet es el lenguaje HTML que sirve para estructurar la información como documento o página web, dándole el formato que hoy en día es universal para prácticamente todas las plataformas hardware y software.

Definición

HTML

Son las siglas de HyperText Markup Language, es decir, “Lenguaje de Marcas de HiperTexto”. Es un estándar desarrollado actualmente por la World Wide Web Consortium (W3C) basado en el SGML del cual es un subconjunto extendido. Utiliza etiquetas, que son palabras reservadas del lenguaje encerradas entre los caracteres “<” y “>” para definir el formato y las propiedades del texto, hipertexto, imágenes, sonidos, vídeos, etc. Es el lenguaje más importante de la web, pues casi todas las páginas tienen elementos de este lenguaje. Hay varias versiones, de las que la última es HTML 5 (más multimedia).

Sin embargo, HTML no es suficiente; junto al código HTML, los documentos suelen incluir otros lenguajes de programación que se clasifican en lenguajes de guiones del lado del cliente y lenguajes de guiones del lado del servidor, o simplemente de servidor. Los lenguajes del lado del cliente son interpretados por el navegador web una vez cargada la página en el ordenador de la persona que la ha solicitado, ofreciendo mayor funcionalidad y haciéndola más interactiva. Uno de los lenguajes de este tipo más conocidos es Javascript, que se usa frecuentemente para crear innumerables funciones que no ofrece el HTML, por ejemplo la aparición dinámica de mensajes, ventanas, acciones al pulsar en un determinado elemento o cuando se pasa el puntero del ratón sobre un objeto.

Los lenguajes del lado del servidor como ASP, PHP o JSP que pueden potenciar en gran medida el producto, se ejecutan en el servidor web, enviando al cliente de la página un determinado resultado donde frecuentemente se realizan accesos a sistemas de bases de datos.

HTML suele acompañarse también de hojas de estilo CSS para unificar los estilos visuales (colores, tipos de letras, márgenes, etc.) del producto editorial multimedia.

2.1. Análisis previo de prototipos

Para la elaboración y posterior análisis del prototipo de un producto editorial multimedia, como elemento demostrativo y representativo del mismo, debe determinarse desde un principio a qué nivel de detalle, fidelidad y funcionalidad se va a llegar respecto al producto final y la herramienta de prototipado que se va a utilizar. En este proceso creativo, el equipo de trabajo desarrolla y evoluciona el prototipo una vez aceptado por el cliente, para publicar por último el producto final en un determinado medio o soporte.

El análisis se realiza en función del tipo de prototipo. Desde el punto de vista teórico los prototipos pueden ser:

1 Exploratorios:se usan para definir los objetivos principales del producto multimedia identificando a grandes rasgos los requerimientos funcionales y sus alternativas.

2 Interactivos: son dinámicos y ejecutables en tiempo real, mostrando así al cliente/usuario las funciones más importantes de manera interactiva.

3 Operacionales: son prototipos interactivos que se refinan de manera progresiva hasta que evolucionan en el producto final.

Desde un punto de vista más práctico, un prototipo puede ser de tipo Sketch, es decir, más próximo al boceto realizado con lápiz y papel que representa en las etapas más iniciales, el concepto o idea general, el esquema y la distribución de los elementos de diseño, e incluso algunos detalles funcionales. Es frecuente utilizarlo en las primeras entrevistas con el cliente y en reuniones internas del equipo de desarrollo.

Este tipo también se denomina en “baja fidelidad” o “estático”, ya que normalmente se diseñan a mano mediante dibujos o esquemas y en su análisis se suelen producir iteraciones de refinamiento, hacia un prototipo más desarrollado y dinámico. Las iteraciones de refinamiento suelen generar nuevas entrevistas con el cliente y el desarrollo de ideas o mejoras en su funcionalidad.

Su coste de producción normalmente es y debe ser bajo -incluso desechable- en relación con otros tipos de prototipos. Por el contrario, el coste del análisis es más alto pues necesita posteriormente un desarrollo mayor. El objetivo del Sketch es separar el diseño de la creación “física” del producto.

A un nivel más avanzado existen los prototipos de tipo Wireframe, que ofrecen mayor detalle del contenido que representan y están especialmente indicados en la organización y distribución visual de las páginas o pantallas del producto, pero no en los detalles gráficos o estilísticos. Si se debe analizar una secuencia de páginas prototipadas en modo Wireframe, se habla de Storyboard.

Sabía que...

Aunque las primeras ideas sobre el concepto de Storyboard surgen a principios del siglo XX, no es hasta los años 30 cuando la compañía Walt Disney lo usa en la producción de películas animadas. En poco tiempo se hizo muy popular en la industria cinematográfica, generalizándose su uso en todo tipo de películas.

El coste de realizar los prototipos en modo Wireframe es mayor que en modo Sketch, pero lógicamente en la etapa de análisis y desarrollo, el coste disminuye pues su nivel de detalle es mayor. El refinamiento de los prototipos de tipo Wireframe permite obtener más información sobre los requerimientos y restricciones del producto.

Los modos Wireframe y Storyboard se consideran “dinámicos” si además representan un modelo operativo, informatizado, interactivo y poseedor de las funciones presentes en el producto final.

Muestra de una pantalla de la herramienta gratuita de edición de wireframes Indigo Estudio

Hay otros conceptos respecto al análisis de los prototipos creados. Este se puede realizar de manera “global” cuando se estudian un conjunto amplio de características y funcionalidades para su implementación en el producto definitivo, o de manera “local” cuando se analiza un único elemento o componente, que posee una funcionalidad determinante en el sistema. Dicho de otra manera, el prototipo puede mostrar muchas características con pocos detalles o bien pocas características pero de manera muy detallada -lo cual es especialmente útil en las etapas de análisis y desarrollo posteriores para solucionar determinados aspectos técnicos-.

Actividades

1. ¿Qué tipo de prototipo es el que se puede hacer con lápiz y papel?

2. ¿A qué corresponden las siglas FTP y para qué se usa?

2.2. Especificaciones técnicas del producto

El desarrollo de un producto o aplicación editorial multimedia parte generalmente de la definición del proyecto entre el cliente y el equipo de trabajo. En esta fase inicial deben especificarse claramente los aspectos y detalles técnicos más importantes del producto en lo que se refiere a:

1 El tema general de la aplicación multimedia.

2 A quién va dirigido el producto.

3 Determinar el formato de publicación de la aplicación: principalmente online y offline.

4 Planificar el desarrollo realizado mediante sucesivas iteraciones de prototipos y su aceptación por parte del cliente y a qué nivel de detalle se hará.

5 Si la aplicación se va a basar en el libro de estilo que aporte el cliente o es necesario crear uno nuevo. Diseñar las líneas generales de la apariencia estética del producto.

Posteriormente, aunque desde las etapas iniciales de desarrollo, se irán especificando otras características, como:

1 Qué tecnología y lenguajes se van a usar para programar la aplicación.

2 Las especificaciones técnicas sobre los tipos de archivo multimedia que se van a usar, así como sus niveles de compresión.

3 El nivel de “responsividad” del producto, es decir, su grado de adaptación a distintos dispositivos independientemente de las características técnicas de estos, como la resolución de sus pantallas. Cada vez se accede más a la web y a las aplicaciones desde dispositivos móviles.

4 Los elementos de control internos de la aplicación como el sistema de navegación: menú de navegación, botones de navegación, hipertexto, hipervínculos, etc.

5 Reproducción de las secuencias de audio y vídeo, reproductores que usarán y “codecs”. Determinar si en algunas pantallas se usarán animaciones y/o música de fondo.

6 Temporización: ajuste del tiempo de determinados elementos, en los que a modo de presentación se van desarrollando secuencias de carácter demostrativo o didáctico, donde es muy importante fijar correctamente la velocidad de ejecución.

7 Accesibilidad y usabilidad del producto.

8 Otros elementos: barras de desplazamiento, controles de impresión, sistemas de búsquedas, formularios, acceso a datos, etc.

Definición

Codec

Es un término que proviene de las palabras “codificador-decodificador” y sirve para referirse a un sistema software o hardware que permite la reproducción y transmisión de flujos de datos multimedia, en especial audio y vídeo. La principal función de un “codec” es reducir el tamaño de los ficheros, lo cual mejora su reproducción y el almacenaje. La mayoría de las veces esto provoca pérdida de información y, por tanto, de calidad.

Hay un gran número de técnicas y métodos relacionados con el desarrollo de proyectos y la programación de los mismos, mediante los cuales se puede llevar un control de las especificaciones funcionales, operativas y de seguimiento. Una de las más sencillas es el uso de las tablas de control, que sirven para especificar cómo se comporta la aplicación multimedia a lo largo de los distintos temas o pantallas, especificando como datos más importantes:

1 Nombre, número o código de la pantalla.

2 Orígenes o entradas: de qué pantalla o pantallas se llega a esta.

3 Destinos o salidas: desde esta pantalla, a qué pantallas se puede acceder.

4 Fondo: si la pantalla tiene un diseño de fondo, el color del mismo, si es una imagen o si usa algún tipo de efecto o animación, por ejemplo.

5 Textos que aparecen en la pantalla y descripción de los estilos usados.

6 Elementos de navegación: menús, botones, hipertexto, etc.

7 Botones de acción: botones que permiten ejecutar un determinado comando, como salir de la aplicación, desactivar el sonido, imprimir una determinada pantalla, etc.

8 Zonas sensibles de la pantalla y su comportamiento, es decir, aquellas que tienen definida una determinada interactividad con el usuario.

9 Elementos multimedia: secuencias de audio o vídeo, así como los controles que se usan para su reproducción, propiedades, etc.

10 Ventanas de ayuda y control: su contenido, formato y eventos que producen su aparición.

11 Otros datos: si la pantalla se presenta durante un tiempo determinado, incluye controles de formulario, búsquedas u otros elementos, etc.

Nota

Las tablas de control permiten hacer la descripción de las pantallas que forman la aplicación, una vez establecida la idea principal y la navegación por el árbol de contenidos, así como el orden de aparición de los elementos que componen una pantalla, el destino de los vínculos de una página, o el tiempo que dura una determinada narración.

Aplicación práctica

De la reunión mantenida con un cliente para la realización de una web multimedia se obtiene la siguiente información: se desea un diseño claro y bien estructurado donde en la parte superior izquierda se coloca el logotipo de la empresa. Justo debajo debe ir un menú horizontal que ocupe todo el ancho de la página, con los enlaces “home”, “quiénes somos”, “marco normativo”, “sitios de interés”, “acceso usuarios”, “servicios y contacto”. Más abajo, el espacio horizontal lo ocupa un banner y un espacio para buscar, con la distribución que se desee.

Debajo de esto se presenta el área de contenido. Estará formada por el título del contenido que se esté visitando y a la derecha la fecha y la hora. Justo después, a la izquierda se muestra el texto de dicho contenido y a la derecha ocupando el 30 % del espacio, una zona fija para registrarse.

Al final, en la parte más inferior, se sitúa el pie de página que muestra a la izquierda el enlace “información del sitio”, y a la derecha el enlace copyright. Los márgenes que rodean la página ocupan aproximadamente el 15 % en todos los lados.

Realice el prototipo sketch o dibujado a mano que cumpla con estos requisitos de diseño.

SOLUCIÓN (Posible solución)

Aplicación práctica

Se necesita realizar la tabla de control del boceto web que se muestra en la siguiente imagen. El tipo de letra es Arial, de tamaño 10 para el texto normal, 14 para los enlaces y 24 para los títulos.

SOLUCIÓN

2.3. Implementación del producto a partir del proceso asociado al prototipo

El proceso de creación de un prototipo se basa en una serie de etapas que previamente se definen con las especificaciones más importantes del producto. Así, el prototipo de un diseño editorial multimedia, entendido como un modelo de simulación y demostración debe poder ser convertido, mediante un sistema planificado o automatizado, en el modelo definitivo que representa, sin perder en ningún momento las características funcionales y de interactividad.

El objetivo es optimizar el tiempo de desarrollo del proyecto involucrando desde el principio al cliente o a los usuarios en este proceso, centrando la atención en implementar lo antes posible la funcionalidad y dejando a un lado los detalles estéticos que puedan distraer. Esto está muy relacionado con el concepto de evolucionar un prototipo o producto básico mediante iteraciones, a través de la “experiencia de usuario” o UX (user experience).

Nota

La UX es el método que usan hoy día los gigantes de internet como Google y Facebook, entre otros. Se basa principalmente en desarrollar un producto con continuos cambios y pequeñas evoluciones, contando con la experiencia retroactiva de los usuarios. Estos, como si fuesen millones de testers o probadores, participan en un escenario donde la información sobre la experiencia de uso del producto tiene un gran valor en el desarrollo del mismo.

Las ideas de desarrollo de aplicaciones multimedia a partir de prototipos están muy extendidas hoy día y existen multitud de aplicaciones para usar estos métodos. Lo más importante es la definición previa del proyecto y optimizar el desarrollo del mismo a partir de los pasos seguidos durante la creación y evolución de los prototipos.

2.4. Aportaciones de calidad y mejora para su publicación

Antes de realizar la publicación del producto editorial multimedia, se recomienda tener en cuenta una serie de condiciones que mejoran el diseño, la funcionalidad y el posterior uso de la misma por parte de los usuarios:

1 Los fallos y deficiencias en el servidor donde se aloja el producto que impiden acceder a la publicación online, son muy mal vistos por parte de los usuarios, por lo que merece la pena invertir en un servidor fiable. Es más importante la capacidad de transferir archivos eficazmente, que un gran almacenamiento a menos que esto también sea necesario.

2 Relacionado con el anterior punto, si un determinado servicio, página o pantalla no está terminado o no se encuentra disponible, no usar nunca la típica pantalla de “En construcción”. Estas pantallas dan muy mala imagen, y seguramente el usuario no vuelva a usar el producto. Como alternativa deshabilitar temporalmente los enlaces a estas páginas de la manera más discreta posible.

3 Optimizar los archivos multimedia usados, como las imágenes en formato JPG, GIF o PNG y los sonidos en formato MP3. Mantener unos niveles mínimos de calidad, reduce notablemente el tamaño de los archivos, y por consiguiente el tiempo que tarda el usuario en descargarlos, visualizarlos o escucharlos.Proceso de compresión del formato JPEG en Adobe Photoshop, donde la calidad del archivo resultante es directamente proporcional a su tamaño en “bytes”.

4 Especial importancia, debido al gran tamaño que pueden llegar a alcanzar, tienen las secuencias animadas realizadas por ordenador, como las animaciones 3D y las secuencias de vídeo. Aunque existen opciones de compresión para los formatos típicos de vídeo como AVI y MPEG, existe hoy día una posibilidad más interesante que es almacenarlas en formato FLV. Este formato lo usa el reproductor Adobe Flash Player para visualizar vídeo en internet y utiliza “codecs” que ofrecen muy buena calidad visual y alta compresión. Muchos reproductores famosos como VLC y MPlayer leen este tipo de archivos.

5 Usar si es posible el estándar de gráficos vectoriales SVG en sustitución de determinadas imágenes, por sus ventajas de tamaño de archivo y escalabilidad. Estudiar el uso de ciertas etiquetas que aportan la versión 5 de HTML, que permiten insertar de forma nativa, abierta y más eficiente, elementos multimedia como audio y vídeo en el documento web sin la necesidad de usar Flash.

Definición

SVG

Las siglas SVG corresponden a la traducción en inglés de Gráficos Vectoriales Escalables, y es una especificación abierta y gratuita para definir gráficos en dos dimensiones estáticos y animados, que permiten representar elementos geométricos, imágenes de mapas de bits y texto. Cada vez tiene más influencia en la web, al ser soportado por prácticamente todos los navegadores y por programas de edición gráfica.

f. Definir el estilo visual del producto mediante hojas de estilo CSS estableciendo así de manera uniforme la apariencia de elementos tales como textos, fondos, vínculos, tablas o imágenes. Se pueden almacenar en un fichero o documento aparte, lo que permite su reutilización en otros ficheros HTML. Así en el documento CSS se guardan los distintos nombres o “selectores” que representan un conjunto de propiedades y valores de presentación, para poder ser aplicados posteriormente.

g. Aplicar el conjunto de técnicas que mediante HTML 5 y CSS 3, principalmente, permiten que el producto multimedia se adapte visualmente al dispositivo que acceda a él. Esta característica se denomina “diseño responsivo”, “responsable” o “adaptativo” y tiene como principal objetivo que el producto pueda adaptarse correctamente a cualquier dispositivo que acceda a ellos, como teléfonos móviles, tabletas, televisores de nueva generación, y ordenadores personales.

h. No hay que cargar las pantallas de efectos visuales, algunos de los cuales incluso puede que no funcionen para todos los navegadores. Un ejemplo es el efecto de pase de página, que simula pasar con el dedo una página real de revista o libro. Si este efecto no se reproduce fluidamente, puede obligar al lector a tener que esperar a que finalice para poder continuar con la lectura, interrumpiendo su ritmo. El exceso de efectos puede provocar que el producto multimedia sea más lento, tenga fallos o lo que es más grave, no sea soportado por algún navegador. Los efectos, por muy llamativos que sean, están sujetos a modas y quitarlos, cuando ya no cumplen su función, tiene un coste.

i. Para ofrecer documentos que los usuarios puedan descargar una de las mejores soluciones es el formato PDF: puede visualizarse en cualquier plataforma software y hardware incluida internet con distintos niveles de compresión y admite reglas de seguridad y control.

Nota

Las siglas corresponden a Formato de Documento Portable, y es un tipo de archivo abierto y estandarizado, que permite almacenar texto, hipertexto, imágenes vectoriales, imágenes de mapas de bits y contenidos multimedia. La mayoría de los navegadores actuales permiten mostrar documentos PDF directamente.

j. JavaScript, el principal lenguaje de guion presente en internet, se ha revalorizado en los últimos tiempos y la tendencia es aprovechar sus virtudes para mejorar la interactividad y funcionalidad del producto y potenciarlas con nuevas tecnologías basadas en él, como AJAX, jQuery y el uso de HTML 5 y CSS 3, comentado anteriormente.

k. Usar siempre que esté dentro de las especificaciones del proyecto, características de la web 2.0. que actualmente llevan ya tiempo desarrolladas. Un ejemplo son las encuestas interactivas que permiten la participación de los usuarios en un determinado tema.

l. Se aconseja mejorar el posicionamiento web del producto multimedia con distintas técnicas que en conjunto hacen la página más “visible” a los buscadores. Este tema es complejo, pues no existe la garantía de obtener el mejor de los resultados, salvo que se haga una fuerte inversión en marketing online y en contratar el posicionamiento.

m. La accesibilidad, es decir, la cualidad de ofrecer el producto multimedia a todas las personas independientemente de su capacidad y la usabilidad, como virtud de facilidad de uso, son dos de las características más importantes. Se amplían estos conceptos más adelante en este capítulo.

n. Los productos publicados en la web pueden mostrar datos organizados, mediante el acceso a bases de datos alojadas en el servidor. Para ello, es necesario programar la aplicación mediante lenguajes de guiones del lado del servidor como PHP o ASP y conectar el código con un determinado sistema de base de datos. Hoy día el acceso a la base de datos MySQL desde PHP es una de las mejores y más efectivas soluciones, aparte de ser libre y gratuita. El uso de bases de datos tiene la gran ventaja de automatizar y simplificar enormemente el uso del sistema y las posteriores actualizaciones.

o. Si se usan formularios para ofrecer al usuario un método seguro de comunicación con la aplicación, es aconsejable programar rutinas que aseguren que la información suministrada es válida e informar además sobre la Ley Orgánica de Protección de Datos en el caso de que el usuario tenga que enviar datos personales.

Actividades

3. Mediante el uso de tablas de control, ¿cuáles son los elementos que definen la navegación en el producto multimedia?

4. ¿Qué recurso sirve para unificar la apariencia y el estilo visual del producto multimedia online?

3. Herramientas utilizadas para la publicación en web

Cuando alguien visita una página web, lo que hace básicamente es acceder mediante un programa de navegación a un servidor web conectado a internet, el cual enviará al navegador un archivo en formato HTML y los distintos objetos –como imágenes, por ejemplo- que la página muestra. Este “aparentemente” sencillo proceso implica un trabajo previo de edición y posterior traspaso de la información, que necesita el uso de herramientas de software para la creación y publicación de los documentos multimedia, la transferencia de los archivos y la programación de determinadas funciones.

Nota

Se suele denominar “servidor web” tanto a la máquina física o computadora como al programa informático que instalado en ella, realiza la función. También denominado servidor HTTP, su tarea principal es aceptar las solicitudes de acceso a los documentos web almacenados en sus discos y devolver a los usuarios a través de Internet, documentos HTML junto con el resultado de la ejecución de otros posibles lenguajes como ASP, PHP, o datos almacenados en una base de datos.

3.1. Herramientas de autor para la publicación de elementos multimedia

El concepto de “herramienta de autor” se relaciona con aquellos tipos de programas que ofrecen a los desarrolladores un conjunto de funciones y utilidades que ayudan en el diseño y creación de aplicaciones profesionales, de la manera más sencilla posible.

La herramienta de autor debe cumplir el objetivo de disminuir el esfuerzo a realizar por parte de los usuarios en el proceso de creación, ya sean estos expertos programadores, o por otro lado, personas que sin conocimientos de programación puedan llegar a desarrollar un buen producto multimedia.

Definición

Herramienta de autor

Una herramienta de autor es una aplicación informática que ofrece una interfaz efectiva y productiva, acompañada de objetos ya programados, complementos, funciones y scripts entre otros, permitiendo el diseño y programación de un producto editorial multimedia de forma completa desde el inicio hasta su publicación.

Para la publicación de productos editoriales multimedia, las más conocidas actualmente son Adobe Director, Adobe Flash y Adobe Dreamweaver.

Adobe Director

Es una de las herramientas de autor más potentes y versátiles del mercado para la producción de aplicaciones interactivas, ricas en contenido multimedia. En su utilización el diseñador debe pensar que la aplicación es similar a una película donde es necesario relacionar los distintos objetos que participan, sobre una línea de tiempo la cual se mide en fotogramas.

Estos objetos se comportarán de una forma específica, en función de sus propiedades, en función del código que tenga programado mediante lenguaje Lingo y en función también de cómo esté colocado en la pantalla y en la línea de tiempo.

Permite incorporar al proyecto casi cualquier tipo de imagen, secuencias de audio y vídeo, películas Flash, texto, hipertexto, animaciones 3D, etc. La aplicación multimedia puede ser guardada en formato de archivo ejecutable para Windows (.exe) o para Macintosh (.app), con lo que para usarla no es necesario tener instalado Adobe Director.

Ventana de opciones de exportación de una película en Adobe Director

Si la película se exporta en formato Flash (SWF), puede ser insertada en una página web. También puede exportarse directamente a formato HTML, opción que se muestra en la imagen anterior.

Nota

Todo documento HTML tiene una estructura fija compuesta por unas etiquetas o marcas “principales” como son las etiquetas <html>, <head> y <body> y una parte que varía en función del contenido de la página, los formatos que se deseen aplicar, etc. Las etiquetas <body> y </body> definen el comienzo y final respectivamente del cuerpo de la página, donde se incluye realmente la información que muestra el documento junto con las marcas que le dan forma y estilo.

Desde la versión 12 del programa se puede incluso generar un archivo de exportación para publicar la película en dispositivos móviles y por otro lado en formato DCR que permite ser reproducida por Adobe Shockwave Player, lo cual es ideal para la web.

En el siguiente ejemplo se muestra el código HTML necesario para incluir en una página web el archivo multimedia “artemultimedia.dcr” creado en Adobe Director y exportado en formato DCR.

Adobe Flash

Esta herramienta de autor es uno de los entornos de edición más conocidos y profesionales. Trabaja principalmente con gráficos vectoriales, imágenes de mapa de bits, sonido, secuencias de video y componentes programables mediante lenguaje Actionscript, para construir cualquier tipo de animación, página web, o aplicación multimedia interactiva, optimizada para su uso en internet.

Nota

La gran capacidad que ofrece Flash y ActionScript ha permitido el diseño de magníficas páginas web multimedia, juegos interactivos e interfaces espectaculares. Además, esta tecnología permite su integración con sistemas de bases de datos, lo que ofrece la posibilidad de programar webs dinámicas, tiendas online, catálogos publicitarios, mapas interactivos, etc. Como ejemplo de webs realizadas en Flash, se destacan las siguientes:

1 <http://www.bandit3.com/>.

2 <http://www.sensisoft.com/>.

3 <http://www.wechoosethemoon.org/>.

4 <http://thetoke.com/>.

5 <http://theoleg.com/>.

La organización del entorno de trabajo es muy parecida a la del programa Adobe Director. Usa un escenario, como área de pantalla donde se colocan los distintos elementos –imágenes, menús, iconos, textos, etc.-. Usa también una línea de tiempo para especificar cuándo ocurren los acontecimientos en la película y el orden de las capas u objetos. Da la posibilidad de definir propiedades a los objetos y asociarles código ActionScript que permite dotarlos de características y comportamientos avanzados.

Los archivos publicados mediante Flash, cuya extensión es SWF, pueden aparecer en una página web o pueden ser reproducidos independientemente por el conocido reproductor Adobe Flash Player. Se usan muy a menudo como animaciones en páginas web y sitios web multimedia y como objetos publicitarios en la web.

De manera similar al ejemplo anterior de inserción de una película en formato DCR, se muestra a continuación el código HTML necesario para publicar en una página web dos películas creadas con Adobe Flash y exportadas en formato SWF y FLV, llamadas “artemultimedia.swf” y “artemultimedia.flv” respectivamente:

Adobe Dreamweaver

Es posiblemente la herramienta de autor orientada a la creación de documentos HTML más completa de todas, ocupando una posición de privilegio en el mercado de los editores HTML, pues además está disponible también para la plataforma Mac. Soporta la mayoría de las tecnologías relacionadas con el diseño web actual como CSS, Javascript, XHTM, AJAX, ASP, ASP.NET, PHP, JSP, conexión a bases de datos y transferencia al servidor.

Otras alternativas y herramientas de autor online

Las aplicaciones de desarrollo comentadas anteriormente no son las únicas. Programas como Adobe GoLive o SwishMax 4 son una alternativa a Adobe Flash, Neobook es una alternativa a Adobe Director y CoffeeCup, Kompozer y Microsoft Frontpage son programas alternativos a Adobe Dreamweaver. Muchos usuarios coinciden en señalar que estas alternativas están un escalón, o más, por debajo de los programas principales señalados. Además no existen hoy día software libre de calidad como alternativa a estas aplicaciones, con la excepción de algunas herramientas de programación web.

Hay otro tipo de aplicaciones cada vez más importantes denominadas CMS, Content Management System o Sistemas de Gestión de Contenidos. Permiten la gestión íntegra de un sitio web dinámico e interactivo, desde un programa de administración directo sobre el servidor, por lo que las modificaciones son inmediatas. Para una edición básica no son necesarios conocimientos de programación ni el uso de otros programas, pero sí es una gran ventaja tener experiencia en HTML, PHP y CSS, ya que suelen estar basados en estas tecnologías. Joomla, Drupal y Wordpress son ejemplos de este tipo de sistemas. Sobre ellos es interesante señalar que son libres, admiten la integración de un sinfín de “plugins” o complementos ya programados y pueden conectarse a sistemas de base de datos como MySQL.

También merece la pena mencionar las aplicaciones de desarrollo multimedia publicadas de manera online que no necesitan ser instaladas en el equipo informático, ya que se usan mediante un navegador web. Un ejemplo es la fantástica y original aplicación para realizar presentaciones multimedia Prezi (<http://www.prezi.com>), o el editor de imagen vectorial Pixlr (<http://pixlr.com/editor/>).

Recuerde

La existencia de las herramientas de autor parte de la idea de hacer posible el crear contenidos multimedia mediante aplicaciones informáticas para usuarios con o sin experiencia.

3.2. Herramientas de transferencia de ficheros

Cuando se realiza un proyecto de aplicación multimedia el procedimiento se basa en “montar” el producto en el disco duro de un equipo informático “local” para posteriormente pasar esta información al servidor web contratado junto con los archivos multimedia que se utilicen. Esta transferencia de ficheros se denomina “publicación web” y se realiza mediante el proceso de comunicación denominado FTP (siglas de File Transfer Protocol o Protocolo de Transferencia de Archivos), haciendo posible que cualquier usuario con acceso a internet pueda acceder al producto multimedia.

Al contratar el servicio de alojamiento junto con el dominio, que es la dirección del servidor web donde se alojará la página asociado a un nombre válido en internet, se debe recibir por parte de la empresa que preste este servicio unos datos de acceso. Estos datos son:

1 Nombre de usuario y contraseña para acceder al panel de control del alojamiento contratado.

2 Nombre del servidor y nombre de la sesión.

3 Nombre de usuario y contraseña del servicio de FTP.

4 Nombre del directorio remoto.

Nota

Todo servidor conectado a internet se identifica de manera única mediante una dirección IP como puede ser “216.239.61.104” (la dirección IP de Google). Además estas direcciones IP pueden traducirse a un conjunto de caracteres alfanuméricos registrados internacionalmente y denominados “nombre de dominio” de forma que sea mucho más fácil su interpretación. Desde el punto de vista del protocolo FTP se puede usar tanto la dirección IP del servidor web como su nombre de dominio.

Como ejemplo, si se contrata un servicio de alojamiento para el dominio <http://www.artemultimedia.com>, los datos anteriores (se muestran entrecomillados) pueden ser similares a:

1 Panel de control: usuario: “user1089”; contraseña: “0p_12ik$mm”.

2 Nombre del servidor: “http://www.artemultimedia.com”.

3 Nombre de la sesión: “ftp://ftp.artemultimedia.com”.

4 Servicio de FTP: usuario: “artemulti”; contraseña: “kandisky”.

5 Directorio remoto: “htdocs”.

El panel de control del alojamiento contratado permite configurar un amplio número de parámetros, desde las cuentas de correo y FTP a la configuración de la seguridad, información de errores o el sistema de bases de datos que se desee instalar. El acceso por tanto debe otorgarse a personas de máxima confianza con sobrada experiencia en el tema.

Panel de control al que se accede mediante nombre de usuario y contraseña, y donde se puede configurar un gran número de parámetros del servidor web.

La transferencia de los archivos del producto editorial multimedia al servidor web se hace de manera segura, es decir, autentificándose por FTP en el servidor, mediante un nombre de usuario y una contraseña. Estos datos, como se ha comentado anteriormente, los debe suministrar la empresa a la que se le contrata hosting o alojamiento.

El envío al servidor de los archivos que componen la aplicación multimedia por FTP (acción que también se denomina “subir” los archivos), se realiza mediante un programa denominado “cliente FTP”, algunos como Fillezilla gratuitos incluso. Este software se instala fácilmente y no tiene ningún coste, siempre que se respete las condiciones legales del mismo. Puede descargarse desde la dirección <https://filezilla-project.org/>.

Como primer paso en la utilización de este programa debe crearse el “sitio” o, dicho de otra manera, la conexión con el servidor contratado. Se ejecuta el comando Gestor de sitios… desde el menú Archivo, lo cual abre una ventana como la que se muestra en la siguiente imagen.

Ventana de creación del “sitio” –en otros programas se denomina “conexión”-. Después de pulsar en el botón de Nuevo sitio, se establece un nombre y se introducen los valores que se muestran a la derecha, incluido el valor 21 para el puerto de FTP.

Una vez creado el “sitio” puede usarse el botón de Conectar para realizar la conexión con el servidor vía FTP y poder transferir los archivos. Es necesario estar conectado con el servidor para realizar la mayoría de las acciones como crear directorios en el servidor o eliminar archivos del mismo.

Desde fuera de la anterior ventana, se puede conectar, desconectar y reconectar usando las opciones respectivas presentes en el menú Servidor. También el programa dispone de una barra de herramientas de conexión rápida y puede usarse el mismo botón Conexión rápida para conectar.

Barra de conexión rápida, que sirve para conectar directamente con el último servidor utilizado. En la parte inferior se muestra el panel que ofrece información en tiempo real sobre el estado de la conexión.

Tras realizar la conexión, el doble panel despliega en el lado izquierdo el árbol de directorios y ficheros del ordenador local o “Sitio local” y en la parte derecha se carga el contenido de subdirectorios y ficheros del servidor o “Sitio remoto” que están por debajo del directorio remoto.

Paneles de gestión de los archivos del sitio local y remoto. Pulsando sobre cualquier fichero o directorio con el botón derecho del ratón aparece un menú contextual con las acciones posibles, entre las que destacan la subida y la descarga de archivos.

Nota

El directorio remoto, también denominado directorio raíz, es la carpeta del servidor donde se almacenan la mayoría de los archivos de un sitio web, organizándolos mediante subdirectorios. Algunos de los directorios remotos más conocidos son:

1 /httpdocs/ Servidor Linux con Ensim.

2 /public_html/ Servidor Linux con Cpanel.

3 /wwwroot/ Servidor Windows con IIS.

4 /httpdocs/ Directorio genérico.

5 /httpsdocs/ Directorio genérico con SSL para conexiones seguras.

Actividades

5. ¿Para qué sirve “crear el sitio” desde un programa cliente FTP?

6. ¿Cuál es la herramienta de autor orientada a la creación de documentos HTML más conocida actualmente?

Las acciones más importantes que pueden efectuarse una vez realizada la conexión con el servidor son:

1 Subir archivos (upload). Es la operación más importante sobre la que se fundamenta la publicación online. Es la copia de los archivos almacenados en el ordenador local, al ordenador remoto o servidor. Si los archivos existen, se pregunta si se desean sobrescribir. El tiempo que se tarda en realizar la subida depende del tamaño de los archivos y del ancho de banda contratado en la conexión a internet -normalmente la subida es mucho más lenta que la bajada-.

2 Bajar o descargar archivos (download). Es el proceso contrario al de subida. Es la copia de los archivos almacenados en el servidor al ordenador local. Normalmente se usa la descarga de archivos para guardar una

3 copia de seguridad en el ordenador local de toda la información contenida en el servidor remoto o en un directorio específico.

4 Crear y eliminar directorios en el servidor. Son dos importantes acciones que sirven para organizar la estructura de directorios o carpetas del servidor web. En algunos servidores no se pueden eliminar directorios no vacíos. Los directorios solo pueden ser creados por debajo del directorio remoto.

5 Renombrar. Es la acción de modificar el nombre de un archivo o directorio del servidor.

6 Desconectar. Es la acción de finalizar la conexión con el servidor. Muchos servidores desconectan automáticamente transcurrido un tiempo de inactividad.

7 Reconectar. Es la acción de volver a conectar con el servidor.

Consejo

Los procesos de subida y descarga de ficheros deben realizarse muy atentamente, pues la sobreescritura accidental de archivos es una acción que generalmente no puede deshacerse. Se recomienda tener siempre actualizada una copia de seguridad del sitio web para evitar este tipo de problemas.

Respecto a qué cliente FTP es recomendable usar, es algo muy relativo y personal, ya que existen muchos programas, incluso gratuitos, que cumplen sus funciones perfectamente, como GoFTP, WS_FTP, Total Commander, Fire-FTP y gFTP, entre otros. Adobe Dreamweaver ofrece un completo cliente FTP desde el comando Definir sitios y Gestionar sitios en el menú Sitio. Como curiosidad, es también posible realizar conexiones FTP desde un navegador web como Internet Explorer o Google Chrome, aunque lógicamente ofrecen menos funciones.

Ventana de autenticación que se muestra en el navegador Google Chrome cuando se intenta realizar una conexión FTP válida.