Читать книгу: «Publicación de productos editoriales multimedia. ARGN0110», страница 2
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:
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.
Бесплатный фрагмент закончился.
