Share
Créer un site Web entièrement basé sur Flash n’est pas une bonne idée pour diverses raisons, cela ne signifie pas pour autant que vous ne devez pas du tout utiliser Flash. J'aime penser à Flash comme une épice. Mettre des épices ici et là pourrait améliorer le goût de votre site Web en le rendant plus agréable et interactif pour vos visiteurs. Bien sûr, comme nous le savons tous, mettre trop d’épices dans notre plat peut poser des problèmes. Flash doit donc être utilisé avec modération. Voyons comment cela peut être fait.
Le but de chaque site Web est un contenu que les gens peuvent lire et apprécier, et qui est également compris par les moteurs de recherche et les robots. Donc, un flash est presque toujours bien. Mais trop de Flash est moins utile aux moteurs de recherche, par rapport au HTML. Les supports Flash peuvent être inclus n’importe où dans un thème WordPress: dans l’en-tête, dans un message ou une page, dans une barre latérale ou dans le pied de page. C'est totalement à vous et à vos préférences et besoins personnels. La chose vraiment importante ici n'est pas l'endroit où vous allez l'utiliser, mais plutôt comment vous allez l'utiliser. Et c'est le but de ce tutoriel. Pour vous montrer divers moyens d’incorporer un média Flash dans vos sites Web utilisant WordPress et comment appliquer ces méthodes correctement. Commençons par le plus essentiel, qui est une base pour les autres.
SWFObject est une bibliothèque JavaScript qui offre deux méthodes optimisées pour incorporer des fichiers SWF dans des pages Web: une approche basée sur les balises et une méthode reposant sur JavaScript. Il utilise un code JavaScript peu intrusif pour détecter Flash Player et éviter les contenus SWF cassés. Il est conçu pour simplifier autant que possible l'intégration de fichiers SWF. Il prend en charge l'utilisation de contenu alternatif pour afficher le contenu aux personnes qui naviguent sur le Web sans plug-ins, pour aider les moteurs de recherche à indexer votre contenu ou pour diriger les visiteurs vers la page de téléchargement de Flash Player. Tout cela est alimenté par un petit fichier JavaScript.
SWFObject est la méthode d’incorporation Flash la plus populaire et la plus efficace disponible à ce jour. Il est largement utilisé par les sites Web de premier plan tels que YouTube, Microsoft Windows et Skype..
Sachant que le balisage et le code JavaScript à utiliser peut s'avérer fastidieux, SWFObject vous fournit un générateur SWFObject supplémentaire pour effectuer ce travail à votre place. Vous pouvez trouver les dernières versions de SWFObject et de SWFObject Generator sur Google Code. Téléchargez le SWFObject et la version HTML du générateur de SWFObject. La principale différence entre la version HTML et la version AIR réside dans le fait que la dernière dispose de la fonctionnalité de copie dans le presse-papier et peut enregistrer votre page HTML sur votre disque dur..
Lorsque vous extrayez le contenu de swfobject_2_2.zip vous obtiendrez un dossier appelé swfobject qui contient les fichiers suivants:
Vous pouvez également télécharger le fichier SWF que nous allons utiliser dans le reste du didacticiel sur Free Flash Animations. Renommez le en nosmoke.swf pour faire court.
D'ACCORD. Tout est prêt. Allons-nous en.
Maintenant, vous devez télécharger tous les fichiers nécessaires sur votre serveur. Ceux-ci sont swfobject.js, expressInstall.swf et nosmoke.swf. Placez-les dans votre dossier de thème actif. Dans ce cas, c'est le vingt onze dossier de thème. Si vous avez beaucoup .swf les fichiers que vous pouvez les mettre dans un sous-dossier.
Pour créer et insérer le code nécessaire dans WordPress, procédez comme suit:
Accentsconagua
balise dans la section corps du code. Tout de à est sélectionné. Le copier.
- Dans la barre latérale de votre tableau de bord WordPress, cliquez sur la flèche à droite de Apparence. Ensuite, cliquez sur Editeur.
- Sur le côté droit de l'écran, vous avez maintenant une liste de tous les modèles qui se trouvent dans le répertoire racine du dossier du thème. Cliquez sur le titre de la souhaitée .php fichier (dans ce cas footer.php). Cela le charge dans l'éditeur de thèmes.
- Collez le code que vous avez copié à partir du générateur de code dans le fichier de modèle approprié. Dans cet exemple, juste au-dessus du
- Pour le contenu principal, sélectionnez et copiez les éléments suivants:
- De retour dans WordPress, ouvrez header.php en cliquant sur Apparence> Editeur> header.php. Collez le texte sélectionné dans l'en-tête au-dessus du
Le générateur de code crée le code pour vous en fonction des choix que vous faites. Il génère le code dans la structure de base d'une page HTML. Le code généré est conforme aux normes Web et prend en charge l’intégration de contenu alternatif. Les éléments JavaScript dans le La balise est créée. Elle contient l’objet et les informations / méthodes de l’objet imbriqué qui délimitent .swf doit être lu, sa largeur et sa hauteur, ainsi que le contenu alternatif à afficher si la version appropriée de Flash Player n’est pas trouvée. Notez que le codage spécial est utilisé pour prendre en compte les besoins d’Internet Explorer, par exemple: À présent nosmoke.swf l'animation apparaîtra sur chaque page sous le pied de page. Bien sûr, il s’agit d’un exemple factice, mais je ne l’utilise que pour des fins de présentation, car cela peut être fait plus rapidement et plus facilement. De toute évidence, vous devrez ajouter des règles de style pour une meilleure apparence. Vous allez voir comment bientôt.
Étape 4: Explication de la configuration de SWFObject
Publication statique ou dynamique
La publication statique utilise un balisage pour incorporer le contenu SWF et le contenu alternatif, et utilise un code JavaScript non intrusif pour résoudre une série de problèmes qui ne peuvent pas être résolus avec le balisage seul. Il favorise la création de balises conformes aux normes et sera donc particulièrement attrayant pour les développeurs de normes Web. Ce mécanisme d’incorporation de contenu Flash ne repose pas sur un langage de script. Par conséquent, votre contenu Flash peut atteindre un public beaucoup plus vaste. Si le plug-in Flash est installé, mais que JavaScript est désactivé ou que vous utilisez un navigateur qui ne le prend pas en charge, vous pourrez toujours voir votre contenu Flash..
La publication dynamique utilise le balisage pour définir un contenu alternatif uniquement et utilise un code JavaScript peu encombrant pour le remplacer par le fichier SWF si la version minimale de Flash Player est installée et si la prise en charge de JavaScript est suffisante. La publication dynamique est moins détaillée que la publication statique et s'intègre très bien aux applications scriptées. Si le plug-in Flash est installé mais que JavaScript est désactivé ou que vous utilisez un navigateur qui ne le prend pas en charge, vous verrez le contenu alternatif au lieu de votre contenu Flash intégré..
Vous devez décider quelle est la meilleure solution pour vous en fonction de vos objectifs et de vos besoins..
Utilisation d'Adobe Express Install
Adobe Express Install est un mécanisme intégré à Flash Player qui vous permet de télécharger directement la dernière version du plug-in Flash sans avoir à naviguer sur le site Web d'Adobe. L'installation rapide est une fonctionnalité facultative pour les auteurs Web. Elle affiche une boîte de dialogue de téléchargement standardisée lorsqu'un visiteur a déjà installé Flash Player 6.0.65 ou une version ultérieure sur des plateformes Windows ou Mac, mais qu'une version de plug-in ultérieure est requise. L'installation rapide utilise une fenêtre de confirmation contextuelle. Il s'agit donc d'une fonctionnalité facultative pouvant être activée par les auteurs Web. Si vous cliquez sur Oui, l'installation rapide ouvrira une boîte de dialogue de téléchargement avec la demande de fermeture de toutes les fenêtres du navigateur. Une fois installé, Flash Player rouvrira la fenêtre de votre navigateur et vous redirigera vers la page où l’installation rapide a été lancée. Si vous cliquez sur Non, SWFObject rétablira le contenu alternatif..
Vous pouvez activer l’Installation rapide en cochant la case Installation rapide d’Express et en modifiant le chemin de la expressInstall.swf fichier, si nécessaire. Afin de vérifier si cette fonctionnalité fonctionne et de la voir en action, faites cette petite astuce: remplacez la version Flash requise par une version plus grande que la version la plus récente de Flash Player (par exemple, 14.0.0). Et vous obtiendrez ce résultat:
Le message vous indique que le contenu nécessite Adobe Flash Player 11.1, car il s'agit en fait de la dernière version du plug-in (pour le moment) et la version 14.0 n'existe pas encore..
Etape 5 Explication de la définition de SWFObject
Dans SWFObject Generator, vous pouvez trouver un grand nombre d’attributs et de paramètres supplémentaires à votre disposition. Ils sont cachés par défaut. Donc, pour y accéder, cliquez simplement sur "plus" en bas de la zone de définition du fichier SWF. Après cela, vous devriez voir ce qui suit:
Selon votre choix, votre contenu Flash se comportera et aura un aspect différent. Pour une description de ce que fait un attribut ou un paramètre particulier, survolez simplement son nom..
L'attribut name est utile lorsque vous devez référencer votre animation Flash à l'aide d'un langage de script. Comme je l'ai dit précédemment, vous devrez peut-être ajouter un style supplémentaire à votre contenu Flash. Pour ce faire, il suffit d'ajouter une valeur pour l'attribut de classe tel que "flashmovie". Cette classe sera ajoutée à l'élément de balise d'objet dans votre code généré. Donc, il ne vous reste plus qu'à ajouter la règle de style suivante dans votre feuille de style de thème:
object.flashmovie // votre code css ici
Étape 6: Utiliser le générateur en ligne SWF intégré
Il existe un autre moyen simple d'obtenir le code de détection nécessaire, en utilisant un générateur en ligne. Un bon peut être trouvé à embed-swf.org. Il est basé sur SWFObject HTML et JavaScript Generator. Pour traiter, suivez ces étapes:
- Ouvrez le configurateur. L'interface est divisée en cinq onglets.
- Tapez les paramètres souhaités dans chaque onglet
- Cliquez sur l'onglet Exporter. Ici, vous pouvez choisir un modèle d'exportation. Si vous souhaitez utiliser votre propre modèle HTML, choisissez Personnaliser. Pour apprendre à en créer un, consultez la documentation.
- Maintenant, cliquez sur Afficher le code HTML. Votre code HTML apparaît. Cliquez sur Télécharger pour enregistrer le fichier sur votre disque dur..
Si vous en avez besoin, vous pouvez restaurer les paramètres par défaut à tout moment en cliquant sur le lien situé dans le coin supérieur gauche. Aussi, vous avez une option pour exporter / importer les paramètres enregistrés pour une réutilisation facile.
Vous n'avez pas besoin de vous soucier de la swfobject.js fichier. Il suffit de laisser l’option par défaut pour le SWFObject qui utilisera le swfobject.js fichier hébergé par Google.
Étape 7 Utilisation de Kimili Flash Incorporer
Selon son site Web, Kimili Flash Embed est:
… Un plugin pour les systèmes de blogging open source populaires qui vous permet de placer facilement des animations Flash sur votre site. Construit sur le code JavaScript SWFObject, il est conforme aux normes, aux moteurs de recherche, très flexible et complet, ainsi qu’à la convivialité..
L'installation du plugin est facile:
- Dans votre tableau de bord, développez le menu Plugins et cliquez sur Ajouter.
- Dans la barre de recherche, tapez "flash embed"
- Lorsque vous voyez Kimili Flash Incorporer, cliquez sur Installer.
- Après l'installation, allez dans Plugins et activez-le ou cliquez simplement sur Activer maintenant.
Pour ajouter du contenu Flash dans vos publications ou vos pages, procédez comme suit:
- Créer un nouvel article / une nouvelle page ou en ouvrir une existante
- Passer en vue HTML
- Maintenant, pour ajouter une animation Flash, utilisez le shortcode suivant, en remplaçant les paramètres chemin, y et x par les chemins, hauteur et largeur respectifs de votre swf:
[kml_flashembed movie = "/ chemin / à / votre / movie.swf" /]
- Le paramètre movie est le seul requis - hauteur et largeur sont facultatifs. Bien qu’il soit plus efficace de dimensionner votre .swf lors de l’exportation, les paramètres hauteur et largeur redimensionneront .swf fichier. Si vous le faites, assurez-vous de garder les nombres en proportion pour éviter les distorsions..
Kimili Flash Embed Tag Generator est une version modifiée du générateur de code HTML et JavaScript de SWFObject 2 et s'intègre étroitement à WordPress, ce qui facilite grandement la création de balises KFE avec le formatage approprié..
Ajout de Flash via KFE Tag Generator:
- Pour lancer Tag Generator, une interface de type assistant qui vous aidera à créer le tag KFE nécessaire, cliquez sur le bouton avec l’icône Flash Player. (vous devez passer en mode visuel pour le voir)
- Une fenêtre similaire à SWFObject Generator apparaîtra
- Tout ce que vous avez à faire est de renseigner les paramètres requis, puis de cliquer sur Générer.
Vous pouvez configurer les paramètres par défaut dans le menu Admin. Choisissez Paramètres> Kimili Flash Incorporer.
Les options ici sont à peu près les mêmes, sauf celles ci-dessous pour JavaScript. Vous pouvez changer la première option en "Non", si vous avez déjà swfobject.js être référencé ailleurs dans votre code. Si vous choisissez d’utiliser Kimili Flash Incorporer pour créer une référence à swfobject.js En cochant "Oui", vous avez alors deux options pour référencer le fichier: Google Ajax Library ou Internal. Cliquez sur "qu'est-ce que c'est?" pour voir quelles sont les différences. Lorsque vous êtes prêt, cliquez sur Options de mise à jour..
Étape 8: Fournir un contenu alternatif
De nos jours, les principaux fournisseurs de moteurs de recherche tels que Google et Yahoo! peut indexer du contenu textuel et des liens dans des fichiers SWF tout en parcourant les états d'une application, comme s'il s'agissait de vrais visiteurs. Alors, pourquoi avez-vous toujours besoin d'utiliser un contenu alternatif pour aider les moteurs de recherche à indexer votre contenu? Ceci pour deux raisons.
- Premièrement, tous les moteurs de recherche ne sont pas capables d’indexer le contenu Flash..
- Deuxièmement, puisqu'un fichier SWF est généralement rempli de contenu multimédia, il restera beaucoup de contenu qui restera invisible pour les moteurs de recherche. Vous devez toujours utiliser un contenu alternatif pour afficher des éléments descriptifs destinés aux personnes bénéficiant d'un support technique réduit et pour aider les visiteurs à trouver la page de téléchargement de Flash Player..
- Enfin, les moteurs de recherche sont susceptibles d’indexer le contenu Flash et le contenu alternatif. Du point de vue des auteurs Web, la duplication de contenu est considérée comme une pratique recommandée, car elle vous permet de créer un contenu Web accessible au public le plus large possible. Pour les éditeurs de moteurs de recherche, elle propose quelques défis complexes, tels décider des résultats à afficher dans les listes de leurs moteurs de recherche. Lors de la création d'un contenu convivial pour les moteurs de recherche, gardez toujours à l'esprit cette dualité. Assurez-vous que votre contenu HTML est un reflet fidèle de votre contenu Flash et laissez un moteur de recherche choisir le contenu qui convient le mieux pour un résultat de recherche..
Par exemple, vous pouvez procéder comme suit pour créer un meilleur contenu alternatif:
- Utilisez exactement la même copie et les mêmes liens que dans votre contenu Flash
- Ajouter des images et une description textuelle au contenu Flash
- Ajouter une copie pour expliquer où Flash Player peut être téléchargé
- Ajoutez du CSS au style et positionnez votre code HTML afin de préserver l'identité visuelle de la page Web..
Par défaut, SWFObject 2 Generator publie le contenu alternatif suivant:
Il en résulte un bouton "Get Adobe Flash Player" pour diriger les visiteurs vers où ils peuvent télécharger le plugin. Pour tester cela, vous devez désactiver votre plugin Flash Player. Dans Firefox, accédez à Add-ons> Plugins. Trouvez Shockwave Flash et cliquez sur le bouton "Désactiver". Maintenant, lorsque vous rechargez la page, vous devriez voir ce qui suit:
Vous pouvez remplacer le code par défaut avec celui-ci:
Maintenant, si les visiteurs naviguent sur la page sans plug-in Flash, ils verront une image au lieu d'une animation réelle:
Les moteurs de recherche et les visiteurs qui naviguent sur le Web dans un navigateur de texte ou dont les images sont désactivées verront le contenu comme dans cette capture d'écran:
Si vous avez une bannière avec plusieurs états, vous pouvez capturer une image pour chacun d'eux, puis insérer ces images en tant que contenu alternatif. Cela peut ressembler à ceci:
Pour une animation ou un contenu vidéo, vous pouvez utiliser le même principe. Vous pouvez capturer plusieurs images clés et les utiliser pour décrire le contenu de votre animation / vidéo. Voici le schéma de base:
Description de l'image 1- Description de l'image 2
- Description de l'image 3
Les personnes sans le plug-in Flash verront une séquence d'images avec des descriptions, tandis que les personnes qui naviguent sur le Web dans un navigateur de texte ou avec des images désactivées verront un ensemble de descriptions numérotées..
Pour ce faire, vous pouvez également inclure une vignette vidéo et une description textuelle du film..
Vous pouvez également ajouter quelques lignes de copie à votre contenu alternatif en expliquant que l'expérience utilisateur interactive ou audiovisuelle souhaitée nécessite la dernière version de Flash Player, avec un lien vers la page de téléchargement..
Vous pouvez également créer des règles de style supplémentaires pour vous assurer que l'identité visuelle ou la mise en page d'une page Web reste intacte. Pensez simplement au contenu alternatif comme une opportunité de communiquer avec votre public cible, même s'il ne dispose peut-être pas du support technologique ciblé..
Conclusion
C'est tout. Vous savez maintenant comment intégrer facilement et correctement le contenu Flash à votre site Web WordPress. Le contenu peut être n'importe quoi - animation, application, film, jeu et tout ce que vous voulez et devez. Avec un peu d'imagination, vous pourrez rendre votre site vraiment cool, d'une part, et toujours utile, d'autre part.
Description de l'image 1