ANÁLISIS DE TENDENCIAS Y ESTÁNDARES PARA LA GENERACIÓN DE GRÁFICOS VECTORIALES EN LA WEB: MACROMEDIA FLASH VS. SVG
RUBIO GARCÍA, Ramón (1); SUÁREZ QUIRÓS, Javier; MARTÍN GONZÁLEZ, Santiago; GALLEGO SANTOS, Ramón; MORÁN FERNANZ, Samuel Universidad de Oviedo, España Escuela Universitaria de Ingeniería Técnica Industrial (Gijón) – Grupo I3G e-mail: rrubio@uniovi.es
(1)
RESUMEN
Lejanos ya los años en que su utilidad era tan sólo procurar un medio rápido de comunicación entre científicos, la Web se ha convertido en un auténtico escaparate donde el diseño gráfico, la interactividad con el usuario y los componentes multimedia (vídeo, audio y realidad virtual) son cada día más utilizados. Esta riqueza y variedad de contenidos, que origina un considerable flujo de información, provoca unos exigentes requisitos técnicos en cuanto al ancho de banda consumido. Esto se traduce en la necesidad de disponer de conexiones apropiadas, algo que no siempre es posible. Las soluciones a este inconveniente no sólo pasan por acometer la reforma de la red de comunicaciones, sino también por mejorar las técnicas de compresión de la información gráfica mediante la adopción de estándares adecuados. En este trabajo del grupo I3G de la Universidad de Oviedo se analiza el panorama actual referente a la generación de contenidos gráficos vectoriales interactivos de calidad y con un discreto consumo de recursos. El estudio se completa con una comparación detallada entre Macromedia Flash y SVG (Scalar Vector Graphics), los dos estándares más implantados en la Web, y con una discusión acerca de la relevancia que adquieren estas tecnologías como nuevas herramientas dirigidas a la creación de recursos dentro de la acción curricular del Área de Expresión Gráfica en la Ingeniería. Palabras clave: Multimedia, Web, graficos vectoriales, SVG, Macromedia Flash.
ABSTRACT
Today, the Web is a big showcase where graphic design, interactivity and multimedia contents are mixed together. This situation makes a growing data interchange that demands a better world communications network. The solution consists on the design of graphical compression techniques in order to increase the bandwidth available. This work from I3G research group analyzes the current alternatives to generate high-quality interactive vectorial graphics on the Web. It also includes a comparison between Macromedia Flash and SVG, the most popular file formats, and a discussion about the role of these technologies in our knowledge area. Key words: Multimedia, Web, vectorial graphics, SVG, Macromedia Flash.
1. Introducción
Los entornos multimedia, entendidos como la combinación de hipertexto, imagen real y sintética, animaciones, video, sonido e interactividad con el usuario en un único soporte, han experimentado un crecimiento exponencial en los últimos años. Gran parte de este éxito se debe al espectacular avance de las tecnologías de la informática y la comunicación, cumpliendo sobradamente la famosa Ley de Moore [1], y posibilitando una difusión mundial de equipos y software de elevadas prestaciones a precios ajustados. Otra razón que explica el extraordinario despliegue de los contenidos multimedia es la proliferación de soportes y plataformas para su difusión. Junto al tradicional ordenador de sobremesa tipo PC, conviven en la actualidad una pléyade de dispositivos portátiles como los teléfonos móviles, PDA, libros electrónicos, videoconsolas, así como nuevas plataformas, tales como la televisión digital, los nuevos dispositivos DVD de alta capacidad, o Internet. De todos ellos, es precisamente éste último el que ha experimentado el crecimiento más significativo. En la actualidad, la Web se ha convertido en un medio de comunicación masivo, rico en contenidos interactivos y multimedia, y que es capaz incluso de canalizar una incipiente actividad económica a través de Internet mediante el cada vez más utilizado comercio electrónico (figura 1).
Figura 1. Crecimiento del comercio electrónico entre 2000 y 2004 (Fuente: INE) Estos contenidos son fundamentalmente de naturaleza gráfica, y se caracterizan por su gran calidad técnica y estética así como por su elevada capacidad de interacción con el usuario. Desde ese punto de vista, la Web es el mejor paradigma de la revolución tecnológica y social que ha supuesto la irrupción de la tecnología multimedia. Las razones que justifican esta afirmación son las siguientes: • • • La elevada usabilidad que presenta el interface Web, fundamentado en el uso del hipertexto y la imagen como elementos de relación y transmisión de conocimiento. La universalidad del acceso a través de los navegadores, aplicaciones existentes para cualquier plataforma y sistema operativo, lo que facilita la experiencia del usuario. El número ingente de usuarios/clientes potenciales, un índice que presenta tasas de crecimiento anual muy destacadas, hacen de la Web el medio de comunicación con la audiencia potencial más elevada, incluso por encima de la televisión. Aunque cada día es más frecuente, la presencia de una empresa u organización en Internet sigue transmitiendo una imagen de vanguardia, lo que se complementa con la posibilidad de difundir contenidos y recursos de valor añadido que mejoren su oferta y los servicios suministrados a los clientes.
•
2. La constatación de un problema
Esta situación ha generado en la actualidad un importante desencuentro entre dos factores: • • El notable aumento de tráfico que acarrea el trasiego de los contenidos multimedia a través de la Red, los cuales están caracterizados generalmente por un peso considerable. El ancho de banda que ofrecen las conexiones actuales, que se ven saturadas ante la imposibilidad de trasmitir flujos de información tan elevados.
La confluencia de ambas circunstancias limita notablemente la experiencia del usuario, al impedir una navegación fluida y fomentar la aparición de tiempos de espera indeseables. Ante situación, caben dos posibles soluciones: • Acometer la mejora de las redes de comunicaciones mediante la implantación de nuevos sistemas y protocolos que eliminen los cuellos de botella existentes en la actualidad. Son numerosas las iniciativas que se están planteando en este sentido, acompañadas de inversiones millonarias y planes estratégicos preferentes. Internet II [2], NGI (Next Generation Internet) [3] o el protocolo IPv6 [4] son algunas de ellas. En cualquier caso, se trata de una solución alejada del ámbito de decisión y actuación del usuario final. Mejorar las técnicas de compresión de la información gráfica, creando nuevos formatos capaces de empaquetar, sin elevadas pérdidas de calidad, los contenidos multimedia disminuyendo de forma sensible su tamaño.
•
Figura 2. Pantalla del navegador Mosaic, creado por la NCSA en 1993 Los primeros navegadores para la Web, a finales de los años 80, estaban diseñados fundamentalmente para el manejo de información textual. Nacida como una herramienta para mejorar la comunicación de resultados entre un conjunto de físicos nucleares del CERN, la primitiva especificación de HTML, el lenguaje empleado en la descripción de páginas Web, no concedía una especial relevancia a la información gráfica [5]. De hecho, el primer navegador Web, desarrollado por Tim Berners-Lee sobre un ordenador NeXT, no mostraba directamente las imágenes en la página, y era preciso visualizarlas a través de ventanas emergentes accesibles desde hipervínculos [6]. No fue hasta 1993 cuando la aparición del navegador Mosaic (figura 2), desarrollado por Mark Andreessen, propició la estandarización de la etiqueta
![]()
como recurso para la adición de imágenes a la Web [7]. Las recién descubiertas capacidades gráficas de la Web fueron rápidamente empleadas por organizaciones
de todo tipo para mostrar sus catálogos de productos y servicios, propiciando un crecimiento imparable desde entonces. La especificación HTML sólo contempla la inclusión de imágenes en formato bitmap (también denominado raster o barrido). El único formato gráfico soportado por los primeros navegadores para la representación de imágenes era GIF (Graphics Interchange Format), desarrollado por la compañía CompuServe [8], y con la posibilidad de representar 256 colores distintos. El anuncio de la necesidad de adquirir una licencia para desarrolladores alentó la aparición del primer estándar gráfico promovido por el consorcio W3C, denominado formato PNG (Portable Network Graphics) [9]. A partir de 1995, el formato JPEG (Joint Photographic Expert Group), dotado de compresión y con 24 bits de profundidad de color, se convirtió en una excelente opción para la representación de imágenes fotográficas sin pérdida aparente de calidad [10]. Estos formatos de imagen basados en tecnología bitmap comparten un conjunto de desventajas que se convierten en serios obstáculos de cara al desarrollo y adopción de nuevas tecnologías en la Web. Las más significativas se enuncian a continuación: • Consumo excesivo de ancho de banda: Las imágenes son pesadas, aunque la existencia de algoritmos de compresión en algunos de ellos minimiza el problema. En cualquier caso, sigue siendo el principal cuello de botella a la hora de conseguir una navegación fluida. Falta de flexibilidad: Como las imágenes están generadas a una resolución predeterminada, la adaptación a los nuevos medios de difusión (PDAs, teléfonos móviles) es insatisfactoria. Además, resulta difícil asegurar que parámetros como los colores empleados o la relación de aspecto se mantienen constantes independientemente del dispositivo utilizado en su visualización. Es decir, no se puede garantizar de forma absoluta que la imagen se está visualizando tal y como había sido diseñada. Complejidad a la hora de vincular información: Aunque el entrelazamiento de información mediante los hipervínculos es un aspecto inherente a la Web, resulta complejo conseguir que distintas zonas de una imagen bitmap incrustada en un documento HTML respondan a diferentes enlaces, un comportamiento que se denomina mapas de imagen. Las propuestas desarrolladas para superar esta situación, diferenciadas en función del lugar donde se produce el procesamiento del mapa, no han dado lugar a resultados satisfactorios porque, en última instancia, el usuario no vincula las regiones a las entidades que se encuentran en la imagen, sino a la visualización de las mismas en la pantalla, con las indeterminaciones que este proceso plantea. Carencia de comportamientos animados e interactivos: Numerosas aplicaciones (cartografía, CAD, teleformación, etc.) necesitan de estos comportamientos para que la experiencia del usuario sea más completa. La animación con imágenes bitmap queda reducida a la nada recomendable sucesión de imágenes en el tiempo, y la interactividad a la conseguida con los mapas de imagen, siendo ambas soluciones muy poco satisfactorias. Separación entre contenido y estilo: Las imágenes bitmap son incapaces de adaptarse a las especificaciones de los dispositivos de visualización, lo que conlleva un posible cambio en su aspecto que arroje una variación del significado original del gráfico, tal y como fueron concebidas por su diseñador. Formato poco adecuado: El almacenamiento de una imagen bitmap se realiza en formato binario, lo cual hace difícil añadir metainformación para facilitar los procesos de indexación y búsqueda. Además, obliga a contar con herramientas especializadas para la edición de las imágenes.
•
•
•
•
•
3. Alternativas para la visualización de información gráfica en la Web
Frente la descripción tradicional de un gráfico como un conjunto de píxeles coloreados, la arquitectura de almacenamiento vectorial de gráficos describe las imágenes como un conjunto de entidades geométricas, denominadas primitivas, las cuales llevan asociada información sobre sus propiedades por medio de una serie de atributos (figura 3). Empleados profusamente en el ámbito del CAD y el modelado tridimensional, los gráficos vectoriales presentan una serie de ventajas que los convierten en una alternativa viable a la generación de imágenes para la Web [5]. Las más significativas se describen a continuación: • Las entidades que componen un gráfico vectorial se describen por medio de su ecuación matemática, lo que supone un grado de compresión elevadísimo, sin parangón en los formatos bitmap. Un fenómeno derivado de lo anterior es que la calidad de la representación es independiente del tamaño de la imagen, y no depende de ningún parámetro ajustable como ocurre con el tamaño del píxel en los gráficos bitmap. De ese modo, la focalización puede variarse libremente sin que la visualización se vea afectada. La capacidad de edición de la escena es muy elevada, puesto que resulta muy sencillo acceder a los atributos de las entidades previamente seleccionadas. La adición de metainformación a las entidades posibilita la creación de hipervínculos a distintas referencias, abriendo además la puerta a un comportamiento interactivo con el usuario.
•
• •
Figura 3. Tecnología de gráficos de barrido (izquierda) y vectoriales (derecha)
Desde 1994, el consorcio W3C [11] trabaja en la confección de estándares gráficos para la Web, adaptados a las peculiaridades que presenta este medio de difusión. Las recomendaciones establecidas por esta institución en 1996 acerca de las características imputables a una especificación exitosa de gráficos vectoriales para la Web se sustentan en cinco grandes apartados: • • La necesidad de una especificación de libre distribución y gratuita, que permita a los programadores desarrollar aplicaciones sin ataduras. La conveniencia de establecer una descripción vectorial de entidades muy completa, que no sólo defina primitivas convencionales (puntos, líneas, círculos) sino también especifique el empleo de textos, fuentes tipográficas, o que incluye comportamientos más habituales en el ámbito de los gráficos bitmap, como la transparencia o los efectos de máscara. El interés que promueve la generación de gráficos animados e interactivos, para promover su empleo en sectores donde estos comportamientos son muy demandados. La necesidad de adosar metainformación a las entidades vectoriales, con el fin de vincular bases de datos alfanuméricas a la información gráfica. La conveniencia de desarrollar herramientas de autor, es decir, entornos gráficos y amigables para que el usuario sin experiencia pueda crear sus contenidos sin necesidad de aprender complicados lenguajes de programación
• • •
Desde esta declaración de intenciones por parte del Consorcio, han surgido una serie de iniciativas para dar respuesta a estos requisitos. A continuación se describen las propuestas más relevantes.
4. Los gráficos vectoriales en la Web
La primera iniciativa de interés está basada en el empleo del estándar ISO denominado CGM (Computer Graphics Metafile) [12], un formato de descripción de entidades vectoriales con casi dos décadas de existencia, y que ha sido mejorado progresivamente a lo largo de estos últimos años hasta dar lugar a la aparición de perfiles de desarrollo específicos para áreas concretas. Un sosegado análisis realizado por el W3C en 1997 concluye que es posible la definición de un perfil CGM para la Web, ya que verifica satisfactoriamente muchas de los requisitos contemplados en el epígrafe anterior. Se trata de una especificación abierta, con unas prestaciones muy satisfactorias fundamentadas en otros dos estándares gráficos ISO, como PHIGS (Programmer's Hierarchical Interactive Graphics System) [13] y GKS (Graphical Kernel System) [14]. Como consecuencia de la colaboración entre el W3C y el CGM Open Consortium [15], fundado en 1998, en Enero de 1999 se lanza el perfil WebCGM, aceptado por el Consorcio y el organismo regulador internacional ISO. Se basa en un perfil anterior, denominado ATA CGM, que había sido concebido para la industria aeroespacial. Compañías como Micrografx [16] o SDI [17] han elaborado plug-ins para los navegadores más habituales. Aunque en el mundo de la industria norteamericana es ampliamente utilizado en aplicaciones CAD relacionadas con la aeronáutica, no ha llegado a alcanzar una difusión de ámbito general, y fuera de estos sectores es un estándar prácticamente desconocido. Las razones que explican este fenómeno son, por un lado, la carencia que muestra WebCGM a la hora de definir primitivas gráficas con atributos como transparencias o capas máscaras, imprescindibles en el mundo del arte y el diseño. Por otro, las escasas prestaciones a la hora de generar contenidos animados e interactivos, lo que lo aleja de un amplio número de campos de aplicación. Tanto el Consorcio como las compañías privadas desarrolladoras de software han seguido trabajando en creación de propuestas de audiencias más amplias, buscando compatibilizar la facilidad de diseño con las prestaciones cada vez más exigentes que demandan los usuarios. En la actualidad, dos son las especificaciones que han adquirido un papel preponderante a la hora de representar gráficos
vectoriales en la Web: el formato SWF (ShockWave Flash), de la compañía Macromedia [18], y el formato SVG (Scalable Vector Graphics) recomendado por el Consorcio W3C [19]. El formato SWF se ha convertido en un estándar de facto, aunque está bajo el control de un único fabricante. Cientos de miles de páginas Web hacen uso de esta tecnología, ampliamente difundida gracias a la inclusión gratuita del plug-in Macromedia Flash Player [20] con los principales navegadores. Creado por una modesta compañía denominada FutureSplash, el formato fue adquirido en 1997 por la compañía Macromedia como un complemento a su aplicación Director [21], dedicada a la generación de contenidos multimedia. Por su parte, SVG es una especificación libre para el desarrollo de gráficos vectoriales para la Web elaborada por W3C y basada en XML (Extensible Markup Language) [22], un lenguaje cuya aparición en 1997 supuso un profundo cambio a la hora de valorar la futura evolución de la Web. XML es un metalenguaje empleado en la definición de lenguajes basados en etiquetas, como HTML, que permite el almacenamiento de información estructurada en base a un árbol jerárquico de categorías previamente definidas por el usuario. En 1998, el Consorcio recibió cuatro propuestas de formatos vectoriales de gráficos basados en XML: Web Schematics [23], Precision Graphics Markup Language (PGML) [24], Vector Markup Language (VML) [25] y DrawML [26]. Para su discusión y análisis, se formó un grupo de trabajo que concibió SVG, convertido en recomendación de W3C en Septiembre de 2001. En la actualidad, existe una gran confusión en torno a qué formato elegir para la creación de gráficos vectoriales en la Web, en un momento en el que la coyuntura tecnológica abre la puerta a nuevos soportes de difusión y la situación socioeconómica provoca fuertes vaivenes en el sector de las grandes compañías informáticas, lo que hace coger impulso a la ya consabida discusión entre software libre y comercial. Para tomar la decisión, es preciso contar con criterios objetivos que resalten las similitudes y diferencias entre ambas tecnologías. Ese es el objetivo del siguiente capítulo.
5. Comparación entre SWF y SVG
El análisis entre ambos formatos, que se inspira y mejora otras aportaciones realizadas en este campo [27], se ha establecido en torno a los siguientes apartados: Características generales, prestaciones gráficas, comportamiento dinámico e integración de recursos multimedia. Se comparan las versiones SWF 7 y SVG 1.1. Características generales
Tabla 1: Características generales.
CONCEPTO
Tipo de especificación Tipo de formato Formatos Compacidad Tipo MIME Compresión Herramienta de autor Animación Interactividad DOM Modo de visualización Streaming
SWF
Formato propietario Binario FLA, SWF Elevada application/x-shockwave-flash Sí (zlib) Sí (Macromedia Flash) Sí (Linea de tiempo) Sí (basada en eventos y scripting) Propio Plug-in (Macromedia Flash Player) Sí
SVG
Especificación libre Texto ASCII SVG Muy elevada image/svg+xml Sí (gzip) Varios (no es imprescindible) Sí (nodos de interpolación) Sí (basada en eventos, SMIL y scripting) Especificación W3C Plug-in (varios) No
La diferencia fundamental entre los dos formatos radica, aparte de en el tipo de licencia, en el procedimiento de creación y edición. Mientras que SWF es generado a través de Macromedia Flash, una potente herramienta de autor incluida en la Suite Studio [28], SVG carece de entornos de desarrollo con prestaciones similares, aunque la situación está cambiando en los últimos meses gracias a la aparición de herramientas como Inkscape [29] o Sketsa [30]. Sin embargo, el formato tipo texto de SVG favorece su edición con un sencillo procesador de textos, independizando su creación de sistemas operativos y plataformas, lo que otorga un mayor control sobre su generación. En ambos casos, la visualización se lleva a cabo a través de un plug-in del navegador, pero mientras Macromedia Flash Player está instalado por defecto en los browsers más difundidos, como Microsoft Internet Explorer, los plug-ins de SVG están parcialmente implementados, no se distribuyen de forma conjunta con el navegador, y su difusión es por tanto mucho menor. Por último, destaca como particularidad que el desarrollo con Flash involucra siempre dos tipos de ficheros distintos: el formato nativo generado por la herramienta de autor con extensión .FLA, y el formato comprimido .SWF, derivado del anterior, pero más ligero y adpatado a las particularidades de la publicación en Web. Prestaciones gráficas
Tabla 2: Prestaciones gráficas.
CONCEPTO
GENERALES Sistema de coordenadas Tipo de coordenadas Tamaño del área gráfica Relación de aspecto del área gráfica Precisión Unidades de longitud Medidas angulares Unidad de tiempo Estructuración del gráfico PRIMITIVAS Linea Polilínea Rectángulo Círculo Elipse Polígono Arco Curvas de Bezier cúbicas EDICIÓN Transformaciones geométricas Matriz de transformación Anidamiento de transformaciones TEXTO Tipo de agrupación División en párrafos Márgenes Listas Alineación Fuentes incluidas Tamaño de fuente Estilo de fuente Peso de la fuente Bloques rectangulares Sí Sí (derecha e izquierda) Sí Sí (left, center, right) Sí Ajustable Sí (normal, italic, oblique) Sí (normal, bold) Líneas de texto No No No Sí (start, middle, end) Sí Ajustable Sí (normal, italic, oblique) Ajuste muy completo Sí No Sí Sí Sí Sí Sí No (simulada en la herramienta de autor) No (simulada en la herramienta de autor) No (simulada en la herramienta de autor) No (simulada en la herramienta de autor) No (simulada en la herramienta de autor) No (simulada en la herramienta de autor) No (simulada en la herramienta de autor) Sí Sí Sí Sí Sí Sí Sí Sí coordenadas afines con eje y negativo Absolutas Ajustable Ajustable Twip (1/20 de un pixel lógico) Pixel Sexagesimales Milisegundo Capas coordenadas afines con eje y negativo Absolutas y relativas Ajustable Ajustable Indefinida px, pt, cm, mm, in, pc, %, em Numerosas Segundo Z-index según SVGDOM
SWF
SVG
Kerning Espaciado entre letras Espaciado entre palabras Espaciado entre líneas Color borde texto Color fondo texto ESTILO Codificación de colores Color borde Anchura borde Transparencia borde Ajuste de esquinas Tipos de línea Color relleno Transparencia relleno Patrones de relleno predefinidos Efectos de máscara Filtros Vectorización Antialiasing global Antialiasing en elementos individuales
Sí No No Sí Sí Sí 24 bit RGB + 8 bit Alpha Sí (sólido) Sí 8-bit Sí (round) No Sí (sólido y gradiente) 8-bit No (simulados con máscaras) Sí No Sí Sí No
Sí Sí Sí No No No sRGB (sintaxis CSS2) Sí (sólido y gradiente) Sí Propiedad “stroke-opacity” Sí (round, butt, square) Sí Sí (sólido, gradiente y bitmap) Propiedad “fill-opacity” Sí Sí Sí No Sí Sí
Sorprende el hecho de que la mayor parte de las primitivas gráficas no aparezcan codificadas directamente en SWF. La razón hay que buscarla en la propia naturaleza de este formato, enfocado hacia la publicación en Web y por tanto más ligero y optimizado que el formato FLA generado por la herramienta de autor. Aunque en este entorno sí están disponibles como herramientas gráficas, en el formato SWF se aproximan mediante una concatenación de operaciones fundamentales como “lineto” o “curveto”. Es significativo señalar que muchos de los parámetros de SVG se definen mediante expresiones heredadas de la especificación CSS (Cascading Style Sheets), utilizada junto con HTML para la creación de páginas Web con hojas de estilo. Así ocurre con las unidades de trabajo, el peso de la fuente, la codificación de los colores o las propiedades de bordes y rellenos. Esta circunstancia facilita el aprendizaje de esta tecnología al desarrollador, ya familiarizado con una sintaxis similar. De hecho, es posible modificar el aspecto de las entidades definidas en SVG desde una hoja de estilo externa vinculada al archivo, al igual que se hace en HTML, permitiendo así la anhelada distinción entre contenido y presentación. Una de las grandes ventajas de SVG es la cuidada atención que presta a procedimientos más propios de la manipulación de imágenes bitmap, como las máscaras, los filtros o la transparencia, en lo que puede considerarse como un intento promovido por el consorcio W3C de crear una especificación que reúna lo mejor de ambas tecnologías. En el caso de la transparencia, se observa como mientras en Flash la propiedad radica en el propio espacio de color, en SVG se trata de un atributo más, con lo que tanto la flexibilidad como el rango de variación alcanzados se incrementan notablemente. Comportamiento dinámico
Tabla 3: Comportamiento dinámico.
CONCEPTO
ANIMACIÓN Arquitectura Tipos de animación Gestión de la animación Keyframes Línea de tiempo Fotograma a fotograma / Interpolada Automática / controlada por eventos Sí Objetos de animación (basados en SMIL) Interpolada Automática / controlada por eventos Sí (KeyTimes / KeySplines)
SWF
SVG
Métodos de creación de animaciones Tipo de interpolación Trayectoria definida por el usuario Animación con velocidad variable INTERACCIÓN Lenguaje de programación Interface de programación Fuentes de Eventos Hipervínculo Web Hipervínculo a otras entidades
Movimiento y morphing lineal / polinómica Sí Sí ActionScript 2.0 ActionScript API Foco / botones / ratón / teclado / cajas de texto /clips de película / fotogramas / ventana Sí Sí, Mediante ActionScript
Movimiento y morphing (limitado) discreta / lineal / polinómica Sí Sí ECMAScript DOM nivel 2 Foco / ratón / visualización / estado / animaciones / modificaciones escena (mutaciones) Sí Sí, directamente
La arquitectura adoptada para la generación de animaciones difiere bastante. Mientras que Macromedia Flash emplea la metáfora de la línea de tiempo donde suceden eventos secuencialmente, heredada de los programas de postproducción de video e incluso de otras aplicaciones de la misma compañía, como Director, SVG descarga en los objetos de animación esta responsabilidad, derivando más el diseño hacia qué se anima en vez de cuándo se anima. Esta posiblidad ya se atisba en otras propuestas de estándares para la Web como VRML (Virtual Reality Markup Language) [31] o su sucesor X3D [32], también basado en XML. En cualquier caso, las prestaciones exhibidas por ambas propuestas son similares. Para la obtención de un comportamiento interactivo, ambos formatos recurren a un lenguaje de programación (ActionScript en Flash y ECMAScript en SVG), que también proceden de un núcleo común como es JavaScript. Resulta destacable la flexibilidad que en SVG desencadenan los eventos de tipo mutación, generados cada vez que se añade, elimina o modifica un nodo de la estructura jerárquica de la escena creada. La posibilidad de establecer vínculos directos entre las entidades definidas en SVG, sin necesidad de acudir a la programación, facilita notablemente la tarea a los diseñadores. Integración de recursos multimedia
Tabla 4: Integración de recursos multimedia.
CONCEPTO
SONIDO Frecuencias de sampleo Tipo Streaming Filtros VIDEO Tipo Streaming Filtros Sincronización audio-video Sí Implementados No soportado No soportado No soportado 5.5 khz, 11 khz, 22 khz 44 khz mono / estéreo Sí Implementados No soportado No soportado No soportado No soportado
SWF
SVG
La especificación SVG 1.1 no contempla la integración de video y audio en la escena. Tan sólo algunos visores, como el desarrollado por Adobe [33], permiten la reproducción de video recurriendo a procedimientos propietarios de la compañía. Sin embargo, el documento de trabajo de la especificación 1.2 completa [34], publicado en Abril de 2005, indica que SVG dará soporte a ambos medios en un futuro próximo. Flash, por el contrario, presenta una excelente integración de diversos contenidos multimedia, a los que aplica de forma automática compresores (MP3 en audio y Sorenson H.263 en video) para minimizar así el peso de la película final. En el caso de las imágenes bitmap, Flash permite, aparte de aplicar una compresión JPEG directa al contenido raster, realizar una vectorización de la misma para convertirla en un conjunto de entidades vectoriales.
6. La Expresión Gráfica ante las nuevas tecnologías de creación de contenidos
No cabe duda de que la aparición de nuevos estándares para la publicación de contenidos gráficos obliga al Área de conocimiento a realizar un estudio sosegado de las capacidades de los mismos para evaluar su posible utilización en la futura acción docente. La próxima entrada del Espacio Europeo de Educación Superior traerá consigo la puesta en marcha de metodologías capaces de aprovechar todas las posibilidades que brindan las Nuevas Tecnologías de la Información. El fin no es otro que el de dar respuesta al reto de una enseñanza más orientada al alumno, el cual tendrá a su disposición un elevado número de recursos no sólo accesibles desde su centro de estudio, sino en su domicilio, donde se desarrollará buena parte del proceso de enseñanza-aprendizaje que ahora será necesario evaluar. Entendiendo la generación de gráficos vectoriales para la Web como un recurso útil para la transmisión del conocimiento del Área de Expresión Gráfica, en áreas como la geometría, los sistemas de representación o el diseño asistido por computador, parece que la propuesta del Consorcio W3C parte con una cierta ventaja para erigirse en el formato a utilizar. Las razones que avalan esta afirmación son las siguientes: • La posibilidad de crear y editar contenidos gráficos en SVG con un sencillo procesador de textos ASCII lo convierte en una opción independiente de sistemas operativos y plataformas informáticas (tabla 1). La pluralidad de unidades de medida soportadas (tabla 2) acerca más esta especificación a la realidad métrica que plantean muchos de los conceptos manejados en Expresión Gráfica. La creación y edición de primitivas nativas en SVG es siempre preferible frente a la simulación de las mismas, como ocurre en SWF (tabla 2), lo cual puede ser objetivo irrenunciable en aquellas aplicaciones donde la precisión tenga un papel esencial. Siguiendo con el objetivo de conseguir una representación fidedigna, el control de los fenómenos de antialiasing sobre las entidades individuales, inexistente en Flash, proporciona una mejora sustancial de la calidad de visualización (tabla 2). Las propiedades específicas de diseño ofrecidas por las entidades en SVG son muy adecuadas para el trabajo en aplicaciones relacionadas con el trazado eficaz de planos y esquemas. La posibilidad de generación de chaflanes y empalmes, la definición de tipos de línea o de patrones de sombreado (tabla 2) son una buena muestra de estas capacidades. Aunque ambos formatos contemplan la realización de transformaciones geométricas sobre las entidades generadas (desplazamientos, giros, etc.), en SVG es posible definirlas y concatenarlas mediante matrices, lo que expande las capacidades de las órdenes de edición y posibilita la implementación eficaz de órdenes de creación de patrones basados en la copia de un elemento base (tabla 2). Los hipervínculos internos en SVG abren la puerta a la referenciación de símbolos y bloques de forma eficaz, emulando así las herramientas existentes en los programas de diseño asistido por computador (tabla 3).
• •
•
•
•
•
7. Conclusiones
La generación de gráficos vectoriales en la Web es una tecnología reciente que ha venido a dar soluciones al problema de la transmisión de contenidos gráficos elaborados a través de redes con anchos de banda ajustados, consiguiendo minimizar los tamaños y los tiempos de descarga sin producir una merma en su calidad. Además, la adición de un comportamiento dinámico mediante
animaciones y comportamientos interactivos ha abierto las puertas a que la información gráfica no sea un simple contenido complementario al texto, sino que tenga una entidad semántica por sí misma. Actualmente, el panorama está dominado por dos formatos que parten de presupuestos muy distintos, como son Macromedia Flash, una iniciativa empresarial privada, y SVG, una propuesta de estándar realizada por el Consorcio W3C. Lejos de vislumbrarse un panorama estable, hay una serie de acontecimientos que añaden una fundada incertidumbre acerca del futuro de estas tecnologías: • La adquisición de Macromedia por parte de Adobe (defensora del estándar SVG hasta la fecha) en 2005 abre numerosas discusiones sobre la apuesta tecnológica que esta compañía adoptará en un futuro cercano. La aparición de nuevos dispositivos portátiles (PDAs, teléfonos móviles, videoconsolas) incrementa la audiencia potencial de estas tecnologías de manera notable. Tanto el Consorcio (a través del borrador de SVG Mobile [35]) como Adobe (mediante Flash Lite [36]) intentan dar respuesta en un ámbito en el que W3C parte con una cierta ventaja, debido al elevado numero de compañías del sector que han dado ya su apoyo a esta iniciativa, comenzado a implantarla en sus teléfonos móviles. Una de las claves de la amplia difusión de SWF hasta la fecha radica en la existencia de una potente e intuitiva herramienta de autor. La aparición de alternativas de prestaciones similares desde el ámbito del software libre está empezando a poner en entredicho esta supremacía.
•
•
Lo que sí parece fuera de toda discusión es el papel relevante que la creación de gráficos vectoriales para la Web puede tener en la acción del Área de Expresión Gráfica en la Ingeniería, toda vez que la disponibilidad de recursos gráficos en línea puede ser un aliado indispensable para la eficaz puesta en marcha de las metodologías docentes que propugna el Espacio Europeo de Educación Superior. Referencias [1] MOORE, G. Cramming more components onto integrated circuits. Electronics Magazine, Vol. 38, pp. 114-117, 1965 [2] Internet II. http://www.internet2.edu [consulta: 3 marzo 2006] [3] NGI Internet. http://eurongi.enst.fr/en_accueil.html [consulta: 4 marzo 2006] [4] Protocolo IPv6. http://www.ipv6.org [consulta: 4 marzo 2006] [5] SVG Tutorial. http://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf [consulta: 15 febrero 2006] [6] GILLIES, J.; CAILLIAU, R. How the Web was Born. Oxford University Press, 2000. [7] BERNERS-LEE, T.; FISCHETTI, M. Weaving the Web. Ed. HarperCollins, 1999. [8] Compuserve. http://en.wikipedia.org/wiki/CompuServe [consulta: 3 marzo 2006] [9] Especificación PNG. http://www.w3.org/TR/REC-png [consulta: 3 marzo 2006] [10] Formato JPEG. http://www.jpeg.org/ [consulta: 3 marzo 2006] [11] Consorcio W3C. http://www.w3.org [consulta: 3 marzo 2006]
[12] ISO/IEC 8632:1999: Information technology -- Computer graphics -- Metafile for the storage and transfer of picture description information. [13] ISO/IEC 9592-1-1997: Information Technology - Computer Graphics and Image Processing Programmer's Hierarchical Interactive Graphics System (PHIGS) - Part 1: Functional Description. [14] ISO/IEC 7942-1:1994: Information technology - Computer graphics and image processing Graphical Kernel System (GKS) - Part 1: Functional description. [15] CGM Open Consortium. http://www.cgmopen.org [consulta: 4 marzo 2006] [16] Micrografx. http://www.micrografx.de [consulta: 4 marzo 2006] [17] SDI. http://www.sdicgm.com [consulta: 4 marzo 2006] [18] Especificación formato SWF. http://www.macromedia.com/licensing/developer/ [consulta: 4 marzo 2006] [19] Formato SVG. http://www.w3.org/Graphics/SVG [consulta: 4 marzo 2006] [20] Macromedia Flash Player. http://www.macromedia.com/go/getflashplayer_loc [consulta: 4 marzo 2006] [21] Macromedia Director. http://www.macromedia.com/software/director/ [consulta: 4 marzo 2006] [22] Extensible Markup Language (XML) 1.0 (Second Edition). http://www.w3.org/TR/REC-xml [consulta: 3 marzo 2006] [23] Web Schematics. http://www.w3.org/Submission/1998/05/ [consulta: 3 marzo 2006] [24] Precision Graphics Markup Language (PGML). http://www.w3.org/Submission/1998/06/ [consulta: 3 marzo 2006] [25] Vector Markup Language (VML). http://www.w3.org/Submission/1998/08/ [consulta: 3 marzo 2006] [26] DrawML. http://www.w3.org/Submission/1998/20/ [consulta: 3 marzo 2006] [27] Comparing .SWF (ShockWave Flash) and .SVG (Scalable Vector Graphics) file format especifications. http://www.carto.net/papers/svg/comparison_flash_svg/ [consulta: 15 febrero 2006] [28] Macromedia Studio 8. http://www.macromedia.com/software/studio/ [consulta: 4 marzo 2006] [29] Inkscape. http://www.inkscape.org [consulta: 12 marzo 2006] [30] Sketsa. http://www.kiyut.com/products/sketsa/ [consulta: 12 marzo 2006] [31] VRML (Virtual Reality Markup Language). http://www.web3d.org/x3d/vrml/index.html [consulta: 12 marzo 2006] [32] X3D. http://www.web3d.org/x3d/overview.html [consulta: 12 marzo 2006] [33] Adobe. http://www.adobe.com [consulta: 12 marzo 2006] [34] Documento de trabajo SVG 1.2. http://www.w3.org/TR/SVG12/ [consulta: 15 febrero 2006]
[35] Recomendación SVG Mobile. http://www.w3.org/TR/SVGMobile/ [consulta: 15 febrero 2006] [36] Macromedia Flash Lite. http://www.macromedia.com/software/flashlite/ [consulta: 15 febrero 2006]