Share
Aunque hacer un sitio web completamente basado en Flash no es una buena idea por varias razones, eso no significa que no deba usar Flash en absoluto. Me gusta pensar en Flash como una especia. Poner algunas especias aquí y allá podría mejorar el sabor de su sitio web, haciéndolo más agradable e interactivo para sus visitantes. Por supuesto, como todos sabemos, poner demasiadas especias en nuestro plato puede traer problemas. Por lo tanto, Flash debe utilizarse con moderación. Veamos cómo se puede hacer esto..
El objetivo de cada sitio web es el contenido que la gente pueda leer y disfrutar, y que los motores de búsqueda y los robots también entiendan. Por lo tanto, un poco de Flash está casi siempre bien. Pero demasiado Flash es menos útil para los motores de búsqueda, en relación con HTML. Los medios flash se pueden incluir en cualquier lugar de un tema de WordPress: en el encabezado, en una publicación o en una página, en una barra lateral o en el pie de página. Depende totalmente de usted y de sus preferencias y necesidades personales. Lo realmente importante aquí no es dónde lo usará, sino cómo lo usará. Y este es el objetivo de este tutorial. Para mostrarle varias formas de incrustar medios Flash en sus sitios web potenciados con WordPress y cómo realizar estos métodos correctamente. Empecemos por lo más esencial, que es la base para los demás..
SWFObject es una biblioteca de JavaScript que ofrece dos métodos optimizados para incrustar archivos SWF en páginas web: un enfoque basado en el marcado y un método que se basa en JavaScript. Utiliza JavaScript discreto para detectar Flash Player y evitar el contenido SWF dañado, y está diseñado para hacer que la incrustación de archivos SWF sea lo más fácil posible. Admite el uso de contenido alternativo para mostrar contenido a las personas que navegan por la web sin complementos, para ayudar a los motores de búsqueda a indexar su contenido o para dirigir a los visitantes a la página de descarga de Flash Player. Todo esto está alimentado por un pequeño archivo JavaScript.
SWFObject es el método de inserción Flash más popular y eficiente disponible en la actualidad. Es ampliamente utilizado por sitios web de alto perfil como YouTube, Microsoft Windows y Skype..
Debido a que tener que averiguar qué marca y código de JavaScript usar puede ser un trabajo tedioso, SWFObject le brinda un generador de SWFObject adicional para que haga este trabajo por usted. Puede encontrar las últimas versiones de SWFObject y SWFObject Generator en Google Code. Descargue el SWFObject y la versión HTML del SWFObject Generator. La principal diferencia entre la versión HTML y AIR es que la última tiene la funcionalidad de copiar al portapapeles y puede guardar su página HTML en su disco duro.
Cuando se extrae el contenido de swfobject_2_2.zip obtendrá una carpeta llamada swfobject que contiene los siguientes archivos:
También puede descargar el archivo SWF que usaremos durante el resto del tutorial en Free Flash Animations. Renombrarlo a nosmoke.swf para abreviar.
DE ACUERDO. Todo está listo. Vamonos.
Ahora necesita cargar todos los archivos necesarios en su servidor. Estos son swfobject.js, expressInstall.swf y nosmoke.swf. Colóquelos dentro de su carpeta de temas activos. En este caso este es el dosmil once carpeta de temas. Si tienes muchos .swf Archivos que puedes poner dentro de una subcarpeta..
Para crear e insertar el código necesario en WordPress, siga estos pasos:
Accentsconagua
Etiqueta en la sección del cuerpo del código. Todo de a se selecciona. Cópialo.
- En la barra lateral de su Panel de WordPress, haga clic en la flecha a la derecha de Apariencia. Luego, haga clic en Editor.
- En el lado derecho de la pantalla, ahora tiene una lista de todas las plantillas que se encuentran en el directorio raíz de la carpeta del tema. Haga clic en el título de la deseada. .php archivo (en este caso footer.php). Esto lo carga en el editor de temas..
- Pegue el código que copió del generador de código en el archivo de plantilla correspondiente. En este ejemplo, justo encima de la
- Para el contenido principal, seleccione y copie lo siguiente:
- De vuelta en WordPress, abre header.php haciendo clic en Apariencia> Editor> header.php. Pegue el texto seleccionado en la sección de encabezado sobre el
El generador de código crea el código para usted según las elecciones que realice. Genera el código dentro de la estructura básica de una página HTML. El código generado cumple con los estándares web y admite la incorporación de contenido alternativo. Los elementos de JavaScript en el se crea una etiqueta que contiene el objeto y la información / método del objeto anidado que delinea qué .swf debe reproducirse, su anchura y altura, y qué contenido alternativo se debe mostrar si no se encuentra la versión adecuada de Flash Player. Tenga en cuenta que la codificación especial se utiliza para tener en cuenta las necesidades de Internet Explorer, por ejemplo: Ahora nosmoke.swf La animación aparecerá en cada página debajo del pie de página. Por supuesto, este es un ejemplo ficticio, pero lo estoy usando solo para fines de presentación porque se puede hacer más rápido y más fácil. Obviamente, deberá agregar algunas reglas de estilo para obtener una mejor apariencia. Verás como en breve.
Paso 4 Explicación de la configuración de SWFObject
Publicación estática vs. dinámica
La publicación estática utiliza el marcado para incrustar tanto el contenido SWF como el contenido alternativo, y utiliza JavaScript discreto para resolver una serie de problemas que no se pueden resolver solo con el marcado. Promueve la creación real de marcado de conformidad con los estándares y, por lo tanto, será especialmente atractivo para los desarrolladores de estándares web. Este mecanismo de incorporación de contenido Flash no se basa en un lenguaje de secuencias de comandos, por lo que su contenido Flash puede llegar a un público significativamente mayor. Si tiene el complemento Flash instalado, pero tiene JavaScript desactivado o usa un navegador que no es compatible con JavaScript, aún podrá ver su contenido de Flash..
La publicación dinámica utiliza el marcado para definir solo contenido alternativo y utiliza JavaScript discreto para reemplazarlo con el SWF si la versión mínima de Flash Player está instalada y hay suficiente soporte de JavaScript disponible. La publicación dinámica es menos detallada que la publicación estática y se integra muy bien con las aplicaciones con script. Si tiene instalado el complemento Flash, pero tiene JavaScript desactivado o usa un navegador que no es compatible con JavaScript, verá el contenido alternativo en lugar de su contenido Flash incorporado..
Debe decidir cuál es la mejor solución para usted en función de sus objetivos y necesidades.
Utilizando Adobe Express Install
Adobe Express Install es un mecanismo integrado en Flash Player que le permite descargar la última versión del complemento Flash directamente sin tener que navegar por el sitio web de Adobe. Express Install es una función opcional para los autores web y muestra un cuadro de diálogo de descarga estandarizado cuando un visitante ya ha instalado Flash Player 6.0.65 o superior en plataformas Win o Mac, pero se requiere una versión posterior del complemento. Express Install utiliza una ventana de confirmación emergente y, por lo tanto, es una función opcional que los autores web pueden activar. Si hace clic en Sí, Express Install abrirá un cuadro de diálogo de descarga con la solicitud para cerrar todas las ventanas del navegador. Después de instalar Flash Player, volverá a abrir la ventana de su navegador y lo redirigirá a la página donde se inició Express Install. Si hace clic en No, SWFObject volverá al contenido alternativo.
Puede activar la Instalación rápida marcando la casilla de verificación Instalar de Adobe Express y ajustando la ruta a la expressInstall.swf archivo, si es necesario. Para probar si esta función funciona y verla en acción, solo haga este pequeño truco: cambie la versión de Flash requerida a algo más grande que la versión más reciente de Flash Player (por ejemplo, 14.0.0). Y obtendrás este resultado:
El mensaje le dice que el contenido requiere Adobe Flash Player 11.1, porque en realidad es la última versión del complemento (en este momento) y la versión 14.0 aún no existe..
Paso 5 Definición de SWFObject explicada
En SWFObject Generator puede encontrar un montón de atributos y parámetros adicionales disponibles para usted. Están ocultos por defecto. Por lo tanto, para acceder a ellos, simplemente haga clic en "más" en la parte inferior del área de definición de SWF. Después de eso deberías ver lo siguiente:
Dependiendo de las elecciones que haga aquí, su contenido Flash se comportará y se verá diferente. Para obtener una descripción de lo que hace un atributo o parámetro en particular, simplemente pase el cursor sobre su nombre.
El atributo de nombre es útil cuando necesita hacer referencia a su película Flash utilizando el lenguaje de scripting. Como dije antes, es posible que deba agregar un estilo adicional a su contenido de Flash. Para hacer esto, simplemente agregue un valor para el atributo de clase como "flashmovie". Esta clase se agregará al elemento de etiqueta de objeto en su código generado. Por lo tanto, ahora solo necesita agregar la siguiente regla de estilo en su hoja de estilos del tema:
object.flashmovie // tu código css aquí
Paso 6 Usando Incrustar SWF Generador en línea
Existe otra manera fácil de obtener el código de detección necesario: mediante un generador en línea. Una buena se puede encontrar en embed-swf.org. Está basado en SWFObject HTML y JavaScript Generator. Para procesar siga estos pasos:
- Abra el Configurador. La interfaz está dividida en cinco pestañas..
- Escriba los parámetros deseados en cada pestaña
- Haga clic en la pestaña Exportar. Aquí puede elegir una plantilla de exportación. Si desea utilizar su propia plantilla HTML, elija Personalizar. Para aprender a crear uno, revisa la documentación..
- Ahora haga clic en Mostrar código HTML. Su código HTML aparece. Haga clic en Descargar para guardar el archivo en su disco duro.
Si lo necesita, puede restaurar la configuración predeterminada en cualquier momento haciendo clic en el enlace en la esquina superior izquierda. También tiene la opción de exportar / importar la configuración guardada para reutilizarla fácilmente.
No tienes que preocuparte por el swfobject.js expediente. Simplemente deje la opción predeterminada para el objeto SWFO que usará el swfobject.js archivo alojado por Google.
Paso 7 utilizando Kimili Flash Incrustar
Según su sitio web Kimili Flash Embed es:
... un complemento para los populares sistemas de blogs de código abierto que le permite colocar fácilmente películas Flash en su sitio. Construido sobre el código JavaScript SWFObject, cumple con los estándares, es compatible con los motores de búsqueda, es altamente flexible y completo, además de ser fácil de usar.
Instalar el plugin es fácil:
- En su Panel de control, expanda el menú Complementos y haga clic en Agregar nuevo.
- En la barra de búsqueda escribe "incrustar flash"
- Cuando vea Kimili Flash Embed, haga clic en Instalar
- Después de la instalación, vaya a Complementos y actívelo o simplemente haga clic en Activar ahora
Ahora, para agregar contenido flash en tus publicaciones o páginas, haz lo siguiente:
- Crear nueva publicación / página o abrir una existente
- Cambiar a vista HTML
- Ahora para agregar una animación Flash, use el siguiente código abreviado, reemplazando los parámetros de ruta, y y x con la ruta, altura y anchura respectivas de su swf:
[kml_flashembed movie = "/ path / to / your / movie.swf" /]
- El parámetro de la película es el único requerido: la altura y el ancho son opcionales. Aunque es más eficiente dimensionar su .swf Durante la exportación, los parámetros de altura y anchura cambiarán de tamaño .swf expediente. Si lo hace, asegúrese de mantener los números en proporción de escala para evitar la distorsión.
Kimili Flash Embed Tag Generator es una versión modificada de SWFObject 2 HTML y JavaScript Generator y se integra perfectamente en WordPress, lo que facilita enormemente la creación de etiquetas KFE con el formato adecuado..
Adición de Flash a través de KFE Tag Generator:
- Para iniciar el generador de etiquetas, una interfaz similar a un asistente que lo ayudará a crear la etiqueta KFE necesaria, haga clic en el botón con el icono de Flash Player. (necesitas cambiar al modo Visual para verlo)
- Aparecerá una ventana similar a SWFObject Generator.
- Todo lo que necesita hacer es llenar los parámetros requeridos y luego hacer clic en Generar
Puede configurar los ajustes por defecto en el menú Admin. Seleccione Configuración> Kimili Flash Incrustar.
Las opciones aquí son prácticamente las mismas, excepto estas para JavaScript en la parte inferior. Puede cambiar la primera opción a "No", si ya tiene swfobject.js siendo referenciado en otro lugar en su código. Si elige utilizar Kimili Flash Embed para crear una referencia a swfobject.js al marcar "Sí", tiene dos opciones desde donde hacer referencia al archivo: Google Ajax Library o Internal. Haga clic en "¿Qué es esto?" Para ver cuáles son las diferencias. Cuando esté listo, haga clic en Opciones de actualización.
Paso 8 Proporcionar contenido alternativo
En estos días los principales proveedores de motores de búsqueda como Google y Yahoo! puede indexar el contenido textual y los enlaces dentro de los archivos SWF mientras navega por los estados de una aplicación, como si fueran visitantes reales. Entonces, ¿por qué aún necesita usar contenido alternativo para ayudar a los motores de búsqueda a indexar su contenido? Esto es por un par de razones.
- Primero, no todos los motores de búsqueda son capaces de indexar contenido Flash.
- Segundo, debido a que un archivo SWF generalmente está lleno de contenido multimedia, todavía habrá mucho contenido que permanecerá invisible para los motores de búsqueda. Aún necesita usar contenido alternativo para mostrar material descriptivo para personas con menos tecnología y para ayudar a los visitantes a encontrar la página de descarga de Flash Player.
- Y, por último, es probable que los motores de búsqueda indexen tanto el contenido de Flash como el contenido alternativo. Aunque, desde el punto de vista de un autor web, el contenido duplicado se considera una práctica recomendada porque le permite crear contenido web que sea accesible para el público objetivo más amplio posible, a los proveedores de motores de búsqueda que ofrece algunos desafíos difíciles, como Para decidir qué resultados mostrar en sus listados de motores de búsqueda. Al crear contenido compatible con los motores de búsqueda, siempre debe tener en cuenta esta dualidad. Asegúrese de que su contenido HTML sea un fiel reflejo de su contenido de Flash y deje que un motor de búsqueda decida qué contenido puede mostrarse mejor como resultado de búsqueda.
Por ejemplo, puedes hacer lo siguiente para crear un mejor contenido alternativo:
- Utilice la misma copia y los enlaces exactos que en su contenido de Flash
- Añade imágenes y descripción textual al contenido de Flash.
- Añadir copia para explicar dónde se puede descargar Flash Player
- Agregue CSS para darle estilo y posicionar su HTML para preservar la identidad visual de la página web.
De forma predeterminada, SWFObject 2 Generator publica el siguiente contenido alternativo:
Esto da como resultado un botón "Obtener Adobe Flash Player" para indicar a los visitantes dónde pueden descargar el complemento. Para probar esto necesitas deshabilitar tu plugin de Flash Player. En Firefox vaya a Complementos> Complementos. Encuentra Shockwave Flash y haz clic en el botón "Desactivar". Ahora cuando recargue la página debería ver lo siguiente:
Puede reemplazar el código predeterminado con este:
Ahora, si los visitantes navegan por la página sin complementos de Flash, verán una imagen en lugar de la animación real:
Los motores de búsqueda y los visitantes que navegan por la web en un navegador de texto o con imágenes desactivadas verán el contenido como se muestra en esta captura de pantalla:
Si tiene un banner con varios estados, puede capturar una imagen para cada uno de ellos y luego insertar estas imágenes como contenido alternativo. Puede verse así:
Para una animación o contenido de video puedes usar el mismo principio. Puede capturar varias imágenes clave y usarlas para describir el contenido de su animación / video. Aquí está el esquema base:
Descripción del cuadro 1- Descripción del cuadro 2
- Descripción del cuadro 3
Las personas sin el complemento Flash verán una secuencia de imágenes con descripciones, y las personas que navegan por Internet en un navegador de texto o con imágenes deshabilitadas verán un conjunto numerado de descripciones.
Otra forma de hacerlo es incluir una imagen en miniatura del video más una descripción textual de la película.
Además, puede agregar algunas líneas de copia a su contenido alternativo explicando que la experiencia de usuario interactiva o audiovisual prevista requiere la última versión de Flash Player, con un enlace a la página de descarga..
También es posible que desee crear reglas de estilo adicionales para garantizar que la identidad visual o el diseño de una página web permanezcan intactos. Solo piense en el contenido alternativo como una oportunidad para comunicarse con su público objetivo, aunque es posible que no tengan el soporte tecnológico específico..
Conclusión
Eso es. Ahora que sabe cómo incrustar contenido Flash en su sitio web con WordPress de forma fácil y adecuada. El contenido puede ser cualquier cosa: animación, aplicación, película, juego y lo que quieras y necesites. Con un poco de imaginación puede hacer que su sitio web sea realmente genial, por un lado, y aún así útil, por el otro..
Descripción del cuadro 1