Share
En este tutorial, aprenderá cómo usar el script SWFObject para configurar la redirección automática de un sitio web de Flash a un sitio web de respaldo que no sea de Flash cuando se visualiza en un iPad.
Aquí hay una maqueta muy simple de un sitio web de Flash que usaremos en este tutorial. Si intentas acceder a esa página utilizando iPad, no podrás ver ningún contenido..
Y aquí está el resultado final por el que trabajaremos. Si accedes con iPad podrás ver la página animada..
Cuando sopla el viento del cambio, algunas personas construyen paredes, otras construyen molinos de viento.
- Proverbio chino antiguo
Creo que el iPad es un gran dispositivo, aunque puedo entender por qué la introducción de la tableta Flashless enloqueció a muchas personas. Admito que me hizo enojar al principio: justo antes de que apareciera el iPad en mi tienda local de Apple, terminé un sitio web Flash. Consideré mi obra maestra personal, y me sorprendí cuando intenté abrirlo con el iPad, en lugar de mi ultra genial. Animación Flash Me redirigieron al sitio de copia de seguridad que no es de Flash que configuré "por si acaso". Confieso que me tomó un tiempo adaptar mi mente al iPad, pero gradualmente he aprendido a creer que, como todos los trabajos pioneros, tuvo que salir de la zona de confort, y creo que estoy bien con eso..
Por supuesto, lo que me ayudó a llegar a esa actitud filosófica fue la cantidad de personas que me contrataron para configurar redirecciones similares para sus sitios web Flash existentes. O bien no podían permitirse el lujo de hacerlo o no querían reemplazar sus sofisticados sitios Flash bien diseñados por otros más sencillos pero más compatibles con el iPad, por lo que la opción de configurar la redirección automática del iPad a un sitio HTML simple y simple era atractiva. ellos.
(Se podría argumentar que, incluso al no poder reproducir animaciones Flash, el iPad es más abierto a JavaScript, pero desafortunadamente no es así. La mayoría de los sitios animados en JavaScript no funcionan bien en iPad. Pruebe cualquiera de estos diez JavaScript. sitios web animados en su computadora y luego en iPad para ver a qué me refiero.
Tendremos que esperar hasta que HTML5 esté completamente implementado para ver el nuevo Internet donde los complementos de terceros como Flash Player pierden gradualmente su importancia. Mientras tanto, el lanzamiento de la tableta iPad ha creado un nuevo nicho temporal en el desarrollo web: sitios web Flash existentes a prueba de iPad. Hay miles de excelentes sitios web en Flash que podrían beneficiarse de este servicio; Es una gran oportunidad de trabajo para chicos como tú y yo..
Puede haber muchas maneras diferentes de probar un iPad en un sitio web de Flash, algunas mejores que otras. Este tutorial ofrece solo una posible solución simple. Así que pongámonos a trabajar.
Puede ser un sitio web completo que no sea de Flash y que contenga la versión HTML de todo el contenido copiado del sitio de Flash, o solo una página web con solo información básica y un mensaje para el visitante, algo así como "usted está viendo nuestra sitio web en un dispositivo que no permite que se muestre el contenido de Flash. Para acceder a todas las funciones, abra nuestro sitio web con una computadora que tenga instalada la última versión del reproductor Flash ".
Para este tutorial, preparé una página web animada con JavaScript para servir como copia de seguridad. iPad es capaz de reproducir la animación moderadamente bien. Crear animaciones de JavaScript compatibles con el iPad está más allá del alcance de este tutorial, pero puede encontrar información útil al respecto en la página de inicio de la biblioteca de animación de JavaScript de $ FX () (y también puede explorar el código fuente de JavaScript). Página animada que usaremos como copia de seguridad..
Nota: para permitir que la página animada de JavaScript se reproduzca cuando se cargue en su servidor, también deberá cargar el fx.js archivo ubicado en la carpeta Scripts entre los archivos descargables para este tutorial.
Debemos averiguar qué código se utilizó para incrustar el archivo SWF del sitio web original de Flash en su página HTML. Podemos hacerlo abriendo la página en el navegador y seleccionando la opción Ver fuente. Alternativamente, podemos abrir la página en cualquier editor de texto o editor HTML especializado..
El fragmento de código que incrusta un archivo SWF en la página HTML es fácil de reconocer dentro del código fuente. Active la función Buscar y busque la página de "swf". Al hacerlo, se mostrará el nombre del archivo swf incrustado en la página html. El código que rodea el nombre del archivo swf es el código que lo incrusta en la página html.
Los archivos SWF se pueden incrustar en una página HTML de diferentes maneras. Describirlos a todos haría que este tutorial fuera interminable, así que si tienes curiosidad, simplemente puedes buscarlo en Google. Solo mencionaré algunos de los más populares..
El código basado en etiquetas HTML básicas para incrustar un archivo SWF puede tener este aspecto:
Es probable que ese sitio de Flash se haya creado hace un tiempo: desde el atributo de la base de código de la etiqueta de objeto, podemos ver que el SWF debe ser jugado por la sexta versión del reproductor Flash..
El código es en su mayoría autoexplicativo, está muy claro qué parámetro hace qué. Una cosa a mencionar es que, como puede ver, por alguna razón aparentemente misteriosa, la mayoría de los parámetros se indican dos veces en el código. Esto es fácil de explicar: el código se dirige a dos navegadores de Internet diferentes por separado..
los etiqueta con todos sus atributos y parámetros objetivos de Internet Explorer. los la etiqueta apunta al navegador Netscape actualmente en desuso (ese navegador ignoró la etiqueta del objeto). De ahí, la repetición de la misma información..
También debería mencionar ese atributo classid de la la etiqueta le dice a Internet Explorer que debe cargar el complemento ActiveX si no está instalado; atributo de pluginpage del La etiqueta le dice a Netscape Navigator que muestre el enlace a la página del complemento.
AC_RunActiveContent.js es un archivo JavaScript que todavía se usaba ampliamente hace solo unos años. Algunos programadores que aún trabajan con Flash CS3 Professional pueden usarlo incluso ahora..
El código que incrusta el archivo swf con AC_RunActiveContent.js puede tener este aspecto:
También hay una línea de código dentro del
Etiqueta de la página que puede verse así:El propósito de la inclusión del archivo AC_RunActiveContent.js fue el cambio realizado por Microsoft Corporation al navegador Internet Explorer en 2006. Como resultado de ese cambio (provocado por ciertos asuntos legales conocidos como "problema de patentes Eolas" y no está directamente relacionado con aspectos técnicos de la programación web), los visitantes que abrieron sitios web de Flash utilizando Internet Explorer tuvieron que hacer clic en el contenido incrustado antes de poder verlo o interactuar con él.
El archivo AC_RunActiveContent.js fue una solución que permitió a los usuarios omitir ese molesto clic y mostrar el contenido activo de inmediato, mediante la generación de las etiquetas html dentro del archivo JavaScript. Ese archivo normalmente se encuentra en la carpeta Scripts en el mismo directorio que la página HTML donde se incrustó el archivo swf. Para no entrar en demasiados detalles, el archivo AC_RunActiveContent.js se llama a través de la función AC_FL_RunContent, y los atributos y valores se pasan al archivo en pares: 'ancho', '800', 'altura', '500' y así en. No es necesario incluir extensiones de archivo con los nombres de los archivos swf, el archivo JavaScript lo hace automáticamente.
OVNI (un acrónimo que significa Objetos Flash no intrusivos) es un archivo JavaScript utilizado desde 2006 para detectar versiones de Flash Player e incrustar archivos SWF en páginas HTMl. Fue creado por Bobby van der Sluis..
El código para incrustar un archivo SWF en una página HTML con ufo.js puede tener este aspecto:
La referencia al archivo JavaScript dentro de la la etiqueta puede verse así:
Los argumentos de los ufo.js son autoexplicativos. El archivo fue muy popular, pero actualmente está en desuso.
FlashReplace.js es un archivo JavaScript ligero (2.1 kb) creado por Robert Nyman.
El código para incrustar un archivo SWF en una página HTML con FlashReplace.js puede tener este aspecto:
Obviamente, como es el caso con los archivos AC_RunActiveContent.js y ufo.js, también encontrará la referencia al archivo JavaScript dentro de etiqueta. Puede verse así:
Como puedes ver, FlashReplace.js es realmente fácil. El primer argumento es el nombre de la etiqueta HTML cuyo contenido se reemplazará con el archivo swf; el segundo argumento es el nombre del archivo swf, el tercer argumento es la identificación arbitraria que puede asignar al objeto que está incrustando, y los dos últimos argumentos son el ancho y el alto del archivo SWF.
swfbject.js fue creado por Geoff Stearns, Toby Boudreaux y Bobby van der Sluis. Actualmente es (2010) la biblioteca de JavaScript más popular y ampliamente utilizada para detectar versiones de Flash Player e incrustar archivos SWF en páginas HTML..
El código para incrustar un archivo SWF en una página HTML usando SWFObject.js puede tener este aspecto:
El fragmento de código que acaba de leer es un ejemplo muy básico de cómo se puede implementar swfobject.js. El código puede ser mucho más complejo. Para obtener más información, consulte este tutorial de swfbject.js y consulte la documentación para desarrolladores.
La referencia al archivo JavaScript dentro de la la etiqueta puede verse así:
Si el sitio web de Flash existente utiliza SWFObject.js para incrustar el archivo swf, tiene suerte: vamos a utilizar el tipo de incrustación SWFObject.js para configurar la redirección a la página web que no es Flash. Si se utiliza cualquier otro tipo de escenario de incrustación, tendremos que borrar el código antiguo de la página HTML y reemplazarlo con la incrustación SWFObject. Vamos a utilizar SWFObject para redirigir a los visitantes del iPad al sitio web de copia de seguridad que no es de Flash.
Para los fines de este tutorial, vamos a utilizar una página de capacitación que tiene el archivo SWF incorporado usando el archivo AC_RunActiveContent.js. Si abrimos la página FlashWebsite.html en un navegador, veremos el archivo SWF familiar incrustado en la página.
Abramos la página llamada FlashWebsite.html en cualquier editor de texto o cualquier editor HTML especializado.
Debemos recordar o anotar la información importante acerca de nuestro archivo SWF, como su nombre (FlashWebsite.swf en nuestro ejemplo), ancho (800), altura (580) y color de fondo (#FFFFFF).
Ahora reemplacemos la línea que hace referencia al archivo AC_RunActiveContent.js en el
etiqueta:con esta linea:
Ahora hemos creado la referencia a la biblioteca SWFObject.
Localicemos un código que se vea así:
Seleccionaremos ese bit de código y lo borraremos. Lo que tenemos ahora es el vacío. Debajo de esa etiqueta, vamos a pegar lo siguiente: Tenga en cuenta que el argumento entre paréntesis para el único parámetro agregado ( Nota: El quinto argumento en los paréntesis de la función SWFObject, "9", se refiere a la versión principal de Flash Player. Cuando no es de particular importancia, prefiero dar un poco de holgura a los navegadores y no exigir la versión más reciente del Flash Player, así que lo puse aquí a 9, aunque la versión actual de hoy (2010) es 10. Guardemos la página HTML y la abrimos en un navegador. Debe tener un aspecto como este. Hasta ahora, nada parece haber cambiado. La animación Flash se reproduce cuando está incrustada usando el archivo AC_RunActiveContent.js, y se reproduce de la misma manera ahora, al estar incrustada con el archivo swfobject.js. Si intentáramos abrir esa página con el iPad, todavía no veríamos ningún contenido.. Agreguemos dos argumentos más al final de la serie de argumentos dentro de los paréntesis de la llamada a la función principal. El primer argumento debe estar vacío, solo las comillas: "", y el segundo argumento debe ser la ruta a la página web de copia de seguridad que no es Flash a la que queremos redirigir a los visitantes del iPad a: "./JavaScriptWebsite.html" El bit completo de código con los dos nuevos argumentos agregados debería tener este aspecto: El primer argumento vacío que acabamos de agregar se llama Nota: "./JavaScriptWebsite.html" es la ruta local a la página de respaldo animada por JavaScript que usamos en este tutorial. Esa ruta nos permitirá probar la redirección tanto localmente como en el servidor. Trabajando con sus propios proyectos, puede establecer la ruta absoluta a su página html de copia de seguridad en lugar de la ruta local, o una ruta local a cualquier directorio o subdominio donde puede elegir alojar la página de copia de seguridad. Antes de cargar los archivos en el servidor, debemos probar la redirección localmente. Para poder hacer eso, simularemos el iPad configurando el atributo de versión del SWFObject a una versión no existente del reproductor Flash. Volvámonos locos y configurémoslo en 1000 (esa versión del Flash Player debería estar disponible en algún momento alrededor de 3000 A.D. si las cosas van bien en Adobe). El código debería verse así: No olvides guardar el archivo.. Ahora abramos FlashWebsite.html en un navegador y echemos un vistazo a la barra de título de la página web. En lugar de decir "Sitio web de Flash", debería decir "Sitio web animado por JavaScript", y la última parte de la URL debe ser JavaScriptWebsite.html en lugar de FlashWebsite.html. Enhorabuena, nuestra redirección está funcionando: la animación ultra avanzada que ve en su ventana gráfica no se realiza con Flash sino con JavaScript. Debería verse y comportarse así.. Vamos a restablecer el valor de la versión de nuevo a "9". El código en el FlashWebsite.html debería verse así: Asegúrate de guardar el archivo de nuevo. Con cualquier software de cliente FTP, subamos los siguientes archivos a un directorio seleccionado en su servidor: Cargue la carpeta Scripts que contiene los archivos swfobject.js y fx.js en el mismo directorio del servidor (para recordarle, swfobject.js es el archivo que permite la integración de swf, así como la redirección, y el archivo fx.js es el que permite para crear y reproducir la animación de JavaScript utilizada en la página web de copia de seguridad que es adecuada para reproducirla en el iPad). No tiene que cargar el AC_RunActiveContent.js también ubicado en la carpeta Scripts en su servidor, aunque si lo hizo accidentalmente, ese archivo no interferirá de ninguna manera con el rendimiento de todos los demás archivos que ha cargado.. ¡Aquí viene, el momento de la verdad! Encienda su tableta iPad y acceda a la página FlashWebsite.html cargada en su servidor. Voilà! Debería ver la página de maqueta animada por JavaScript en lugar de la página de Flash. Acabamos de probar un sitio web Flash a prueba de iPad. Acaba de aprender una de las posibles formas de probar un iPad en un sitio web existente. Hay muchas maneras en que se puede lograr ese objetivo, y no todas ellas implican una redirección automática. Me gustaría pedirles que compartan sus ideas sobre el tema del sitio web Flash a prueba de iPad en los comentarios de este tutorial. Gracias por leer!
so.write ("contenedor")) coincide con el nombre del vacío
xiRedirectUrl, y lo usa el script SWFObject para redirigir a los usuarios que completan la actualización de ExpressInstall. No estamos utilizando ExpressInstall aquí, por lo que dejamos el argumento vacío. El segundo argumento, llamado Redireccionar URL, SWFObject lo utiliza para redirigir automáticamente a los usuarios que no tienen instalada la versión requerida de Flash Player, que es exactamente la función que necesitábamos todo el tiempo. La tableta iPad no tiene instalada ninguna versión de Flash Player, por lo que califica!
Paso 4: Probar la redirección localmente
Paso 5: subir archivos a un servidor
Paso 6: Probar la redirección con iPad
Conclusión
Accentsconagua