Flash_usabilidad_tecnologia by Michael Mojica

Avances de Flash en la Web, a nivel grafico y tecnico

Michael Alexander Mojica O単ate

Master of Fine Arts in Computer Art MFA

INDICE

deContenido Metodología Introducción Usabilidad Tiempo de descarga Uso adecuado Página interactiva Ventajas e inconvenientes Consejos Accesibilidad Causar impacto Las Mejores Web AJAX vs. Flash Las Nuevas tecnologías - Papervision3d SourceBinder WiiFlash Conclusiones

04 06 08 10 11 12 15 17 18 20 21 33 37 42 44 45

Metodología

Mi tesina trata sobre la importancia de la usabilidad en las paginas web desarrolladas en Flash. Como sabemos es un tema de mucha discusión por diferentes profesionales y web master del Html, que están en contra de Flash. Como sabemos Flash es una herramienta innovadora, flexible y comoda al momento de crear, compite con los demás sitios web que están diseñados por codigos como: el Html, php, ajax y entre otros. En el mundo del diseño grafico, Flash se ajusta perfectamente a la necesidad de cada diseñador a la hora de expresar y transmitir su idea al consumidor. Ya que puede estar acompañada por ilustraciones, fotografías, animaciones vectoriales y 3d, como también el uso de video y música. Tambien es una herramienta que ayuda a profundizar aun mas el marketing a nivel web de cada marca. Brindandole al usuario interactividad a tiempo real. Actualmente existen pocos libros actualizados relacionado al tema del mundo tecnología de flash, ya que es un misterio total de todas las criticas efectuadas a este software y muchas son de programadores de html que están en contra de flash. En los libros que adquirí hablan mas que nada sobre sitios web basados en html y en cuanto a estructuración o diseño es muy básico ya que son antiguos. También hice uso de otras Fuentes mas actuales que es la web, en donde investigue en foros, blogs y charlas sobre la usabilidad de flash. Como todos sabemos internet es la cuna esencial de los sitios web por su extensa información que nos rodea.

Metodolog铆a

Muchos de los sitios web que he expuesto en dicho, son muy rico a nivel grafico, pero algunos poseen las t铆picas fallas de peso, en cuanto carga, confusi贸n de navegaci贸n y exceso de animaciones, pero si muy buenas a nivel de interactividad. Hay uno en particular que posee mas o menos un buen uso de usabilidad que es la de las gafas 3d, pero su desventaja es, que no todo poseemos ese tipo de gafa.

INTRODUCCION Adobe flash

Es una aplicación de animación que trabaja sobre “Fotogramas” destinado a la producción y entrega de contenido interactivo para diferentes audiencias alrededor del mundo sin importar la plataforma. Es actualmente escrito y distribuido por Adobe Systems, y utiliza gráficos vectoriales e imágenes ráster, sonido, código de programa, flujo de vídeo y audio bidireccional. (Flash es el entorno y Flash Player es el programa de máquina virtual que permite ejecutar los archivos generados por Flash). Los archivos de Flash, poseen la extensión SWF, pueden estar presentes en una página web, para ser vista en diferentes tipos de navegadores, tambien pueden ser reproducidos independientemente por un Flash Player. Los archivos de Flash aparecen en animaciones de páginas Web, sitios multimedia, y actualmente en Aplicaciones de Internet. Tambien son utilizados en anuncios publicitarios de la web.

Técnica Rotoscoping

En versiones antiguas, Macromedia amplió más allá de las animaciones simples, convirtiéndolo en una herramienta de desarrollo completa, para crear principalmente elementos multimedia e interactivos para Internet. Flash ha tenido una gran influencia en el diseño gráfico, su función rotoscoping ha conducido a una gran popularidad a sus gráficos de vector con rotoscope, realizados con colores pastel de las herramientas de Flash. Muchos flyers, anuncios, revistas, e incluso sitios web que no utilizaban Flash han adoptado este estilo gráfico. Por ejemplo, la campaña del iPod de Apple con los contornos de carácter en fondos coloridos se puede considerar enormemente influida por el estilo de diseño paradigmático de Flash.

La técnica de Rotoscoping se utiliza principalmente para capturar el movimiento humano realista mediante el dibujo sobre película con actores reales. Al principio cada fofograma era proyectado a través de una mesa de luces usando un espejo, y la imagen era calcada y luego transferida a una transparencia. En el rotoscoping clásico, la animación dibujada y la película en vivo se combinaban.

LA USABILIDAD Adobe flash

La Tecnología Flash mejora o empeora globalmente la calidad de un sitio web, es un tema de gran polémica. Flash se usa cada vez más para introducir multimedia en los sitios web, como tambien debemos de conocer cuáles son sus ventajas y desventajas de uso de esta tecnología. Jakob Nielsen afirma: “Flash se emplea mal el 99% de las veces. Tambien desaconseja su uso. Porque: hace que un mal diseño sea más probable, a romper con el estilo básico de interacción de la Web y consume recursos que podrían ser utilizados mejorando en un valor primordial del sitio.” Por otro lado, no todo el mundo está de acuerdo con Nielsen. De hecho se le critica que su propio sitio web www.useit.com, el cual esta basado por el uso de tablas y texto con hiperenlaces, y no posee ningun tipo de grafico ya que es poco atractivo y confuso para los usuarios. 08

Según Nielsen, ‘los sitios Web deben moderar el tono de su apariencia individual y de su diseño distintivo en todas sus formas’. Que quiere expresar con esto: deben de ser intuitivos, simples y rápidos, para asi facilitar la navegación del usuario. Lo que implica reducir al máximo todos los elementos considerados superfluos, incluidas las presentaciones Flash. Otros diseñadores web, famosos a internacional como es el caso de Miguel Ripoll que arguntan que los sitios web deben de ser atractivos a simple vista, con un valor añadido que los distinga de los demás (diseños unicos) y que supongan para el usuario una experiencia única. Su sitio web (www.miguelripoll.com) es una muestra de las posibilidades de DHTML y Flash integrados para crear interfaces muy originales y poco convencionales. Con esto hace que el sitio web sea mucho mas rapida al momento de la descarga, facilitando su navegacion a los usuarios.

Jakob Nielsen

Miguel Ripoll

Tiempo de descarga Si hay algo en lo que todos los diseñadores están de acuerdo es que el tiempo de descarga debe ser el mínimo posible, independientemente del contenido de la página, para evitar que el usuario se canse de esperar y decida visitar otra página distinta. De acuerdo al foro de Maria Llopis: “si Flash nos frustra nuestra visita al site, entonces pierde su sentido. Y más en estos tiempos, donde la red no es precisamente rápida, lo que se dice, rápida!” Debemos de tener cuenta de que Flash puede ser muy eficiente en la generación de animaciones, ya que se basa en gráficos vectoriales generados mediante instrucciones de código. Si se desea introducir animaciones en el sitio web, probablemente Flash sea la manera más efectiva de hacerlo. Posiblemente las animaciones así generadas tardan menos en descargarse que otras alternativas en DHTML y desde luego, su programación es mucho más fácil y rápida para el diseñador.

www.jumptothenextlevel.com

Carlos Prieto, “hay diseñadores que emplean un montón de Kb para generar una animación poco práctica. Un buen diseñador flash puede hacer virguerías con menos de 10 Kb.” Tiene toda la razon Carlos Prieto, comparto su argumentacion con una experiencia actual en el trabajo en donde diseñe un banner interactivo en flash para Peugeot el cual no debia de pesar mas de 30 Kb, y nunca pude a llegar a ese minimo, sino a 80 Kb, a pesar que hise uso de imágenes vectoriales.

Uso adecuado de Flash Por tanto no se trata de elegir entre introducir Flash u otras alternativas multimedia, sino que la cuestión es si se desea introducir multimedia en el sitio mediante ésta u otra tecnología. Una página multimedia interactiva, con animaciones Flash o con cualquier otra tecnología, normalmente ocupará más que la equivalente página con contenido estático. Pero se puede lograr que este tamaño adicional no sea excesivo si se programa adecuadamente y el resultado final puede ser mejor en cuanto a la experiencia del usuario con el sitio web. Como opinion propia a la realidad de acuerdo a esta investigacion, Flash, en el diseño web y en la vida, será positivo o negativo dependiendo del uso que le demos. 11

pรกgina interactiva

http://europe.nokia.com/ musicalmighty

pรกgina interactiva

http://www.ulechang.com/

pรกgina interactiva

http://www.volkswagen.com

Ventajas e inconvenientes de usar Flash en el diseño de una web. Desde el punto de vista del cliente: Ventajas: 1. Las webs creadas en flash son muy vistosas y muy animadas. 2. Actualmente los swf, son enlazado a los buscadores (Google). Inconvenientes: 1. Problemas de accesibilidad. Esto se presenta mas que nada en algunas pda que no posee soporte de flash como es el caso del iPod Touch y el iPhone. 2. Código cerrado. Ningun sitio web diseñado en flash da el código de programación, lo cual nos ata al desarrollador para posibles cambios y no permite que su trabajo lo continúen otros, si la web esta desarrollada en html y php por ejemplo el código podrá ser mas accesible. 15

3. Las web hechas en Flash suelen ser estáticas ha la hora de actualizar datos que nesesiten un cambio constante como pueden ser: precios de venta, fotos, etc. Desde el Punto de vista del desarrollador: Ventajas: 1. Las webs serán muy vistosas. 2. Una vez que aprendes Flash, el desarrollo de una web sera agil. 3. Posee una tenologia propia con propiedad de opensource que pueden complementar la web con nuevas aplicaciones modernas y tecnologicas, como es el caso de wiiflash, papervision3d y entre otras. 4. Es multiplataforma, para que puede ser utilizado en Windows o Apple. Inconvenientes: 1. Flash es un sistema pésimo a lo que posicionamiento web y accesibilidad se refiere. 2.Fash esta bien para pequeños trabajos pero ¿Cuantos portales de gran envergadura no es acto?.

Consejos para diseñar con Flash El uso y el abuso de Flash en los sitios web ha llevado a los diseñadores web a plantearse cuál es la mejor manera de integrar esta tecnología en sus páginas para no caer en los errores más habituales. En primer lugar, hay que decir que la mayoría de los navegadores actuales pueden interpretar sin problemas la tecnología Flash, por lo que ésta se convierte en una atractiva opción a incluir en el sitio web para añadir vistosidad e interactividad. Por otro lado, las animaciones Flash pueden ocupar poco más que las páginas de HTML estándar si se desarrollan adecuadamente, pero actualmente existe una nueva tecnologia que se complementa con flash que es papervision3d que es un motor de render virtual en donde el usuario puede interactuar con la web en modo tridimensional con imágenes y videos livianos que no afectan en ningun momento la desmora de descarga. 17

Flash se debe de usar con moderación y exclusivamente para conseguir los efectos deseados. Su uso excesivo o gratuito puede llegar a ser contraproducente. Se puede hacer una analogía con los GIF animados. En su momento éstos supusieron un avance importante en el atractivo de las páginas web y empezaron a ser usados indiscriminadamente. Hoy en día, se sabe que deben usarse con medida para no saturar visualmente al usuario y porque captan excesivamente la atención. Accesibilidad Aunque cada vez más usuarios tienen Flash instalado en su navegador, (Segun las estadisticas europeas de adobe flash cada año llega a ocupar un 80 a 90% de Flash Player instalado en el ordenador), pero a su vez sigue existiendo gente que aun no lo posee. (Unas de las ventajas del navegador firefox es que posee el plugin del flash player y cada año se actualiza automaticamente anunciando al usuario su actualización). Aquellos usuarios que aun no poseen el plugin de flash player es porque muchos de ellos no poseen el conocimiento de su intalacion, ya que usan avegadores antiguos o un equipo móvil que no soporta esta tecnologia. Un ejemplo basico y esencial de un usuario ciego, a pesar de usar un lector de pantalla para acceder al navegador Internet Explorer, actualmente no puede acceder al contenido Flash de las páginas. Por este motivo, al no ser un elemento estándar de HTML hay que prever la posibilidad de que el usuario no pueda interpretarlo y tener métodos

alternativos de acceso al contenido de la página web. Cómo hacer un objeto Flash accesible. También es recomendable usar el kit de accesibilidad de Adobe el cual permite incluir en Flash, posibilidad de desplazar los objetos con el teclado y asi permitiendo al usuario una interacción con la site. (Esta accesibilidad esta pensada para aquellas personas que poseen deficiencia motriz y que no pueden manejar ratón). Dar la opción al usuario Los intro de los sitios web no deben de iniciarse automaticamente, sino mas bien darle al usuario la opcion de saltarse la presentación Flash si lo desea. Muchas de las presentaciones en Flash tardan un tiempo en descargarse que no todos los usuarios están dispuestos a esperar y muchas de ellas utilizan tecnicas de juego para captar aun mas al usuarios mientar que el porta se termine de caragar. Desventajas del contenido Flash Hace un tiempo atrás se hablaba que los swf no lo podia indexar Google, pero hace podos dias, Google ya indexa los swf en sus motores de busqueda. Ahora sera mas facil que nuevos usuario encuentren con mayor presion la página web. Otra desventaja muy importante es que flash no te permite guardar la pagina en su lista de Favoritos, sino que el usuario debera de copiar la dirección de la página inicial.

En todos los casos anteriores la única limitación es la creatividad del diseñador para crear una aplicación Flash efectiva con el máximo de impacto y utilizando un mínimo de ancho de banda. Causar impacto En cualquier caso, si el usuario ha decidido esperar a que se descargara la animación Flash conviene convencerle después de que su espera no ha sido en inútil. Además de mostrar algún elemento intermedio mientras se acaba de descargar la presentación (como es el caso de los juegos), hay hacerle ver que ha valido la pena mediante una presentación atractiva e incluso impactante o con un innovador interfaz de navegación.

Las Mejores Web Dise単adas en Flash

http://www.towndrow.ca/

http://www.carphonewarehouse. com/xfactor/

http://www.mariafilo.com.br/

http://www.mazdausa.com/ MusaWeb/

http://levi.com/estelle/

http://europe.nokia.com/ musicalmighty

http://www.agmint.com/ Con tecnologia: Papervision3D

http://www.mutabor.de/

http://www.kia.com/

http://www.luchtmachtexperience.nl

http://www.playsmart.jp/ Con tecnologia: Papervision3D

AJAX

AJAX vs. Flash lo bueno y malo

AJAX Lo bueno: Esta basado en XHTML y HTML, y es fácilmente estandarizable. Accesible. La integración de lectores de pantalla, las posibilidades de modificar el tamaño del texto por el usuario, etc. Integración con CSS. Es bastante sencillo separar datos de presentación, por lo que las aplicaciones son más escalables. Ligereza. Se supone que una página con sólo HTML es más ligera que un front-end en flash, aunque en realidad el Javascript necesario para funcionar no es tan ligero, por lo que finalmente se depende de mecanismos de caché en servidor.

Javascript. Lenguaje interpretado en el navegador, sencillo, orientado a objetos (según a quién se le pregunte), especialmente orientado a manipular el DOM de las páginas. Motores de búsqueda. Al basar los interfaces en HTML, son fácilmente indexados por los motores de búsqueda. Lo malo: El usuario puede haber deshabilitado el Javascript en el navegador. No es tan ligero como parece a primera vista. Flash Lo bueno: Player casi universal. Ya que todos los computadores del mundo lo tienen instalado, aunque eso no implica que el usuario de un computador en concreto tenga instalada la última versión del mismo, ni que no lo haya deshabilitado utilizando alguna extensión del navegador. Calidad visual. Sobre todo con el avance en el manejo de los textos en las últimas versiones del player. Animación, multimedia. La única forma solvente de incluir animaciones, contenido interactivo, vídeo, audio. Lenguaje de programación de alto nivel orientado a objetos.

Lo malo: Depende de un plug-in. Se tiende a abusar de las animaciones.

Papervision 3D: Ingeniería 3D para flash

Páginas dinámicas e interactivas usando nueva tecnología flash

Las Nuevas tecnologías De Flash 2008 Papervision 3D Hasta hace un tiempo, solo se veía a esta tecnología cómo un conjunto de fotogramas, que permitían elaborar un contenido interactivo, pero en forma 2D. Esto era una desventaja evidente frente a la tecnología que le hacia competencia directamente, el Javascript. Esta última version trabaja, con aplicaciones que permiten generar un ambiente 3D. Papervision3D es un proyecto que desde un tiempo atrás habian visto la luz y hiy en dia estamos viendo los sorprendentes resultados que nos brinda esta nueva tecnologia. Papervision esta constituido por una novedosa implementacion de parametros que ya poseia Flash, dejando aun lado sus animaciones 2D, para pasar con la secuencia interactiva 3D.

Ventajas de Papervision 3D Es la nueva tecnología en tres dimensiones para Flash, a futuro ira incorporando muchas posibilidades nuevas, como por ejemplo: 1. Diseños Web más dinámicos, las nuevas Web que se desarrollen con esta tecnología podrían incorporar espacios virtuales donde los artículos, noticias, y demás contenidos puedan ser desplegados de una manera totalmente diferente. 2. Aplicaciones más dinámicas. Flash no solo es usado para las páginas Web, es notoria su presencia en distintas aplicaciones, desde un celular o una sofisticada computadora. 3. Mayor interacción para los visitantes. Si de diseño dinámico se trata, con esta nueva tecnología, las paginas no solo serán vistosas y bonitas. Permitirá que los visitantes interactúen de una manera diferente, encontrándose tal vez, con una Tienda virtual, una visita guiada, etc. 4. A través de Papervision 3D Flash, el usuario dispondra de la disposición de la tecnología 3D.

http://www.loisjeans.com/web0809/ Con tecnologia: Papervision3D

Website para Lois Jeans, temporada Otono Invierno. La marca cobra protagonismo en esta nueva web, en la que el catalogo forma diferentes mosaicos de fotos en un interfaz desarrollado en Papervision 3d.

http://www.cimarronjeans.com/ Con tecnologia: Papervision3D

Website para Cimarron Jeans, temporada Otono Invierno. Viento, hojas secas y colores otonales envuelven esta nueva web, Las fotos de la nueva colecci贸n de cimarron vuelan junto a las hojas con el viento otonal en un interfaz sencillo e intuitivo.

http://www.barcinski-jeanjean.com/ Con tecnologia: Papervision3D

Para visualizar aun mas este sitio web, es recomendable tener Gafas 3D. Es la 1ra. Web que veo que utiliza esta tĂŠcnica.

SourceBinder: para flash

es una aplicaci贸n visual para crear redes de aplicaciones en Flash, logrando contenido din谩mico sin tener aplicaciones totalmente separadas.

http://www.sourcebinder.org/ Con tecnologia: sourcebinder

Aun esta en la faceta de prueba y es muy tecnico pero se pueden hacer cosas muy chulas gracias a sus controladores manuales desde su misma web. Es mas una aplicaci贸n de Ingeneria Flash. Proximamente lo veremos en el mercado web.

WiiFlash: para flash

es un codigo abierto el cual nos permite combinar el Adoble Flash, con las aplicaciones de Nintendo Wii., haciendo uso esencia de su control

Conclusiones:

A lo largo de la investigaci贸n de Adobe Flash, me he dado cuenta de lo importante que es la usabilidad en la web. Muchos de nosotros nos inclinamos por la parte visual mas no t茅cnico.

Sabemos que todo lo bonito se vende, ya que es parte de lo que vivimos diariamente en el mundo de la publicidad y muchas de las web poseen animaciones pesadas e interactivas que afecta en parte al usuario.

Debemos de estar consiente que el objetivo principal de un web master es darle comodidad al usuario, proporcionale todas las herramienta necesarias y facil manejo para asi brindarle seguridad en el momento de su navegacion.

Actualmente se estan desarrollan 3 tipos de tecnologias muy importan, una de ellas es la utilizacion de espacio

Conclusiones:

3d livianos, la otra tecnologia es el desarrollo de web con un control Wii en vez de la utilizacion del mouse.

En mi opinión, los sitios web diseñados en flash poseen un alto contenido de originalidad, de combinaciones técnicas y otros factores muy importante que benefician al usuario. Debemos de respetar las limitaciones que nos ofrece este software a pesar de que sea libre en cuanto expresión creativa. Al final de todo estaremos aportando algo nuevo, diferente en el mundo digital y diferenciandonos una vez mas como imagen, marca y concepto.

“Vale mas una idea unica que una idea comun”.

Bibliografía:

Kelly Braun / Max Gadney / Matthew Haughey Usabilidad los sitios hablan por sí mismos Ed. Anaya, Madrid 2003 Kelly Goto / Emily Cotle Rediseño y desarrollo de sitios web Ed. Anaya, Madrid 2005 Jeff Carlson / Toby Malina / Glenn Fleishman Navegación navega Ed. GG, Mexico 1999 Roger Pring www.tipografía Ed. GG, Barcelona 2000 Deke McClelland / Katrin Eismann / Terri Stone Diseño de páginas web Ed. Anaya, Madrid 2001

http://nectarestudio.com/ http://13flo.com/

BibliografĂa:

http://www.barcinski-jeanjean.com/ http://www.redbullsurfing.com/videos/immersive/ http://sourcebinder.org/preview.php?sceneId=419 http://ceslava.com/blog/increible-flash-3d-en-tiemporeal-papervision-3d-ejemplos-y-tutorial/ http://www.typerhero.com/ http://www.sourcebinder.org/preview.php?sceneId=141 http://www.cleoag.ru/labs/flex/plant3d/ http://www.paperskate3d.com/ http://pv3d.org/contest/demos/Flight404_Particles/ index.html http://www.yarus-group.com/ http://www.photostorm.flexplayground.com/ http://www.mutabor.de/ http://www.bcaa.it/ http://www.ulechang.com/ http://www.lukor.com/webmasters/07071382.htm http://mosaic.uoc.edu/