Sitios web flash los pros y los contras

Flash es una herramienta que permite a los diseñadores y desarrolladores crear sitios web increíbles (como habrás visto). Sin embargo, no siempre es fácil crear o administrar un sitio Flash. Vamos a discutir los pros y los contras de hacerlo..

Los Pros: Gráficos

Animación:

Flash es una excelente herramienta de animación, puede usar interpolaciones y / o animación fotograma a fotograma para crear animaciones. En estos días, jQuery puede crear animaciones ingeniosas (haga clic en los enlaces para las transiciones), pero dudo que jQuery sea capaz de crear una transición similar a las que se encuentran en el sitio web de Davi-T..

3D:

Desde la llegada de Flash CS4, es posible trabajar en 3D (bueno, más o menos) el 3D en Flash CS4 le permite mover objetos en el espacio 3D, sin embargo, estos objetos no tendrán profundidad. Afortunadamente, hay varias bibliotecas de ActionScript que son capaces de crear algunos gráficos en 3D sorprendentes. Basta con mirar el sitio de Papervision3D. Por supuesto, existen otras bibliotecas además de Papervision3D, como Away3D y FIVe3D..

(Web) Interacción cámara y micrófono:

Con Flash no es tan difícil acceder a la cámara web y / o al micrófono. Si quisiéramos usar cualquiera de estos, Flash sería la solución más fácil (en línea)..

Consistencia del navegador

Si alguna vez ha desarrollado un sitio HTML / CSS, es probable que haya encontrado inconsistencias en el navegador. Afortunadamente, los sitios de Flash no tienen inconsistencias en los navegadores, en realidad solo hay dos cosas necesarias para que un sitio de Flash funcione. El navegador debe tener instalado el complemento de Flash Player (correcto) e idealmente JavaScript debería estar habilitado (en realidad, JavaScript no es necesario para que funcione Flash, sin embargo, JavaScript se usa a menudo en combinación con Flash, como SWFObject y SWFAddress).

Entonces, ¿este es un gran problema? Realmente no. Adobe afirma en su sitio que el contenido de Flash Player alcanza el 99% de los equipos de escritorio habilitados para Internet. Y W3Schools afirma que en enero de 2008 solo el 5% tenía JavaScript desactivado. Con los años esta cantidad ha ido disminuyendo constantemente. Es seguro decir que la gran mayoría de los usuarios podrán usar su sitio Flash, y más adelante analizaremos cómo hacer que su sitio sea utilizable para personas sin el complemento de Flash Player y / o JavaScript..

Afortunadamente hay una solución para esto, a saber, SWFObject. SWFObject es un script de JavaScript que puede mostrar un contenido alternativo para las personas que no tienen el complemento Flash Player (correcto). Discutiremos SWFObject más a fondo durante la parte SEO de este artículo..

Los contras: la inconsistencia del navegador

Ok, lo siento chicos, no he mencionado una pequeña inconsistencia del navegador. Debido a una resolución de patente, los complementos que se cargan mediante el uso de , y / o Las etiquetas solo son interactivas después de que el usuario haga clic en ellas. Ahora, en realidad esto solo parece ocurrir en Internet Explorer, lo que significa que en IE su sitio Flash no podrá responder al usuario antes de que se haya activado..

Una vez más, SWFObject puede ayudarnos a eliminar este comportamiento de hacer clic para activar. Simplemente incrustando una película Flash con SWFObject, el comportamiento de clic para activar desaparece. En Kirupa hay un excelente tutorial que explica cómo usar SWFObject para resolver el problema de incrustación.

Gestión de contenido

Con cualquier sitio que ejecute o posea, querrá la libertad de administrar el contenido que contiene. Lo más importante es que vayas. dinámica; cargue su contenido externamente para que pueda cambiarlo con la frecuencia que sea necesaria. Use campos de texto estático solo si está seguro de que nunca cambiará el texto dentro de esos campos.

Es muy común almacenar su contenido en un archivo XML, luego, dentro de su sitio Flash, cargará este archivo XML y mostrará su contenido..

Aquí un ejemplo, tenemos nuestro archivo XML llamado content.xml:

   Hola mi nombre es daniel.  

Luego podríamos acceder a su contenido dentro de Flash con un script como el siguiente:

 // crea nuestro campo de texto var bio_text: TextField = new TextField (); bio_text.width = 400; bio_text.height = 400; addChild (bio_text); // nuestra solicitud var request: URLRequest = new URLRequest ('content.xml'); // cargar nuestra solicitud var loader: URLLoader = new URLLoader (request); // cuando el cargador haya terminado de cargarse, llame a la función displayContent loader.addEventListener (Event.COMPLETE, displayContent); función displayContent (event: Event) // almacena los datos del cargador en una variable llamada xml var xml: XML = new XML (event.target.data); var xmlList: XMLList = new XMLList (xml); // cambia el texto de bio_text a lo que está dentro del  etiquetas bio_text.text = xml.bio; 

Ahora que nuestro contenido está almacenado externamente (no dentro de nuestro sitio Flash), es más fácil administrarlo.

Afortunadamente, hay sistemas de administración de contenido (CMS) especialmente diseñados para Flash, que facilitan mucho la administración de contenido. En Designm.ag hay un buen artículo para leer, 15 de las soluciones Flash CMS más prometedoras.

SEO

Antes de comenzar a hablar de SEO, es importante saber cómo funcionan los motores de búsqueda. Los pequeños programas se "arrastran" por la web en busca de contenido que se puede indexar a un motor de búsqueda. Estos programas se llaman bots, arañas, hormigas y probablemente algo más..

Sin embargo, estos bots indexarán el contenido HTML de una página (aunque aquí viene el problema) Flash está simplemente incrustado en el HTML de una página, por lo que el bot del motor de búsqueda no tiene idea de lo que hay dentro. Si queremos que los motores de búsqueda indexen nuestro sitio, debemos apuntarlos a contenido HTML que puede indexar.

Así que ahora podemos comenzar a hablar de SEO, ¿qué es realmente SEO? Bueno Wikipedia logra explicarlo en el lugar:

La optimización de motores de búsqueda (SEO) es el proceso de mejorar el volumen o la calidad del tráfico a un sitio web desde los motores de búsqueda a través de resultados de búsqueda "naturales" o no pagados ("orgánicos" o "algorítmicos").

Básicamente tenemos un problema que estamos tratando de resolver:

"¿Cómo puedo hacer que el contenido de mi sitio Flash sea accesible para los motores de búsqueda?"

Por suerte hay varias soluciones. Vamos a repasarlos uno por uno:

SWFObject

SWFObject es un script de JavaScript que permite mostrar un contenido alternativo para el usuario, si no tiene un complemento de Flash Player (o está desactualizado). Y si el usuario no tiene JavaScript, se degrada con gracia. SWFObject tiene tres ventajas:

  1. Los bots de los motores de búsqueda leerán el contenido alternativo. Esto puede ayudar a hacer que su sitio de búsqueda de Flash sea amigable.
  2. No solo los bots leerán el contenido alternativo, las personas que no tienen el complemento de Flash Player (correcto) también lo verán.
  3. Como ya se mencionó en el Gráficos En la sección, SWFObject elimina el cuadro de clic para activar en Internet Explorer.

Sin embargo, SWFObject tiene un pequeño problema, mostrará un contenido alternativo para toda la película Flash, por supuesto, es demasiado para mostrar todo el contenido de nuestro sitio flash en una página como contenido alternativo. Lo ideal sería mostrar la alternativa para la página específica que está visitando el bot o usuario..

Ahora no he encontrado una solución bien documentada, sin embargo, he decidido usar una combinación de detección de Flash y SWFAddress. Permítanme primero explicar qué es SWFAddress.

Dirección SWF

George Kendros explica en su tutorial Crear una plantilla de sitio web simple utilizando el punto SWFAddress en lo que hace SWFAddress:

SWFAddress es una biblioteca de Javascript / ActionScript que le permite cambiar la URL del navegador, agregar entradas a su lista de historial y desencadenar eventos de ActionScript cuando la URL cambia. También permite a los motores de búsqueda encontrar contenido específico en su sitio..

Con SWFAddress podemos utilizar el llamado enlace profundo. Un enlace profundo es un enlace que apunta a una página específica en lugar de a la página de inicio. Esto significa que podemos usar SWFAddress para enlazar a una página específica dentro de nuestro sitio Flash.

Entonces, que vamos a hacer?

Primero vamos a construir un sitio HTML, este sitio HTML será para los robots y los usuarios que no pueden ver nuestro sitio Flash. También usaremos un script de detección de Flash, que redirigirá al usuario al sitio de Flash, si el usuario tiene el complemento de Flash Player correcto. La redirección utilizará enlaces profundos, por lo que podemos redirigir al usuario a la misma página, pero dentro del sitio de Flash.

¿Cómo detectamos si el usuario tiene instalado el complemento de Flash Player correcto? Bueno, hay un artículo sobre Kirupa llamado Flash Detection Scripts. Allí encontrarás un script de detección de Flash, que he editado un poco:

 función de redirección (versión, flash_url) var MM_contentVersion = versión; var plugin = (navigator.mimeTypes && navigator.mimeTypes ["application / x-shockwave-flash"])? navigator.mimeTypes ["application / x-shockwave-flash"]. enabledPlugin: 0; if (plugin) var words = navigator.plugins ["Shockwave Flash"]. description.split (""); para (var i = 0; i < words.length; ++i)  if (isNaN(parseInt(words[i]))) continue; var MM_PluginVersion = words[i];  var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;  else if si (navigator.userAgent && navigator.userAgent.indexOf ("MSIE")> = 0 && (navigator.appVersion.indexOf ("Win")! = -1)) document.write (' \norte'); // FS oculte esto de IE4.5 Mac dividiendo la etiqueta document.write ('on error resume next \ n'); document.write ('MM_FlashCanPlay = (IsObject (CreateObject ("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion))) \ n'); document.write (' \norte');  if (MM_FlashCanPlay) window.location.replace (flash_url);  else // no se necesita hacer nada, quédate en esta página

En nuestra página HTML, ahora podemos llamar con JavaScript a la función de redireccionamiento, que solo necesitará dos parámetros, a saber, la versión de Flash Player y la URL a la página a la que debe redirigirse si el usuario tiene el complemento de Flash Player correcto. Digamos que tenemos la siguiente página HTML:

    Acerca de       

Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

Nos centraremos en la línea 8. Lo que sucederá es lo siguiente; Si el usuario tiene Flash Player 10, redirigirá al usuario a http://www.example.com/#/about y luego SWFAddress utilizará un enlace profundo para mostrar la página correcta, dentro del sitio de Flash..

Desarrollo

Crear un sitio web Flash es difícil, por múltiples razones. Primero deberá pasar mucho tiempo codificando todo, necesitamos escribir código para casi todo. Necesitamos codificar gráficos dinámicos, necesitamos codificar el diseño, manteniendo las cosas posicionadas donde las queremos. Necesitamos codificar y / o animar transiciones entre las páginas. Debemos cargar el contenido y también mostrarlo. Crear un sitio Flash lleva mucho tiempo y es complicado, no lo tome a la ligera.

Afortunadamente para nosotros, hay varios marcos que pueden facilitar el desarrollo de un sitio Flash. Estos marcos pueden diferir en lo que ofrecen, pero cada marco puede ayudar a aligerar su carga de trabajo en un área específica.

Aquí hay algunos marcos que pueden ayudarte durante el desarrollo:

  • Gaia
  • Camuflaje flash
  • Marco PureMVC

Debo tener un sitio Flash?

Realmente me encantan los sitios de Flash, cuando se hacen correctamente, se ven increíblemente hermosos, sin embargo, hay una cosa muy importante que recordar:

Los sitios tratan sobre el contenido que comunican al usuario; Flash solo proporciona una forma de mostrar ese contenido.

¿A qué me refiero precisamente con esto? Bueno, un blog quiere que la gente lea las publicaciones, por lo que su diseño debe funcionar de una manera que permita al usuario leer fácilmente una publicación.. Flash no es necesario para esto.

Sin embargo, si va a crear un sitio de portafolio de fotografías, entonces desea mostrar el contenido (imágenes) de manera fácil y simple para el usuario. Hacer clic en los enlaces y esperar a que se carguen las imágenes no es una gran experiencia para el usuario. Flash es una posibilidad para proporcionar el contenido de una manera más intuitiva. El sitio de Lesse Pedersen utiliza una excelente navegación para servir el contenido (imágenes) al usuario.

También hay una gran publicación en el sitio, Despertar más tarde, llamado 6 lugares que Flash no pertenece, que creo que todos deberían leer..

Gracias

Una vez más lo pasé muy bien escribiendo para Activetuts +, espero que hayas aprendido algo y ¿por qué no te uniste a la discusión? Deja un comentario, y por supuesto puedes encontrarme en Twitter, @DanielApt.