Share
Flash est un outil qui permet aux concepteurs et aux développeurs de créer des sites Web incroyables (comme vous l’avez vu). Cependant, il n'est pas toujours facile de créer ou de gérer un site Flash. Nous allons discuter des avantages et des inconvénients de le faire.
Flash est un excellent outil d’animation. Vous pouvez utiliser des interpolations et / ou des animations image par image pour créer des animations. De nos jours, jQuery peut créer des animations géniales (cliquez sur les liens pour les transitions), mais je doute que jQuery soit capable de créer une transition similaire à celles trouvées sur le site Web de Davi-T..
Depuis l'avènement de Flash CS4, il est possible de travailler en 3D (en quelque sorte), la 3D dans Flash CS4 vous permet de déplacer des objets dans un espace 3D, mais ces objets n'auront pas de profondeur. Heureusement, il existe plusieurs bibliothèques ActionScript capables de créer des graphiques 3D étonnants. Il suffit de regarder le site Papervision3D. Il existe bien sûr d’autres bibliothèques que Papervision3D, comme Away3D et FIVe3D..
Avec Flash, il n’est pas si difficile d’accéder à la webcam et / ou au microphone. Si nous voulions utiliser l'un ou l'autre, Flash serait la solution la plus simple (en ligne).
Si vous avez déjà développé un site HTML / CSS, vous avez probablement rencontré des incohérences dans le navigateur. Heureusement, les sites Flash ne présentent aucune incohérence dans les navigateurs, il n’ya en fait que deux choses nécessaires pour faire fonctionner un site Flash. Le navigateur doit disposer du plugin Flash Player (correct) et idéalement, JavaScript doit être activé (en réalité, JavaScript n'est pas nécessaire pour que Flash fonctionne, mais JavaScript est souvent utilisé en combinaison avec Flash, comme SWFObject et SWFAddress)..
Alors, est-ce un gros problème? Pas vraiment. Adobe indique sur son site que le contenu de Flash Player atteint 99% des postes de travail connectés à Internet. Et W3Schools indique qu’en janvier 2008, seulement 5% des utilisateurs avaient désactivé JavaScript. Au fil des ans, ce montant a constamment diminué. Il est prudent de dire qu'une grande majorité d'utilisateurs pourront utiliser votre site Flash. Nous verrons plus loin comment rendre votre site utilisable par des personnes sans le plugin Flash Player et / ou JavaScript..
Heureusement, il existe une solution à cela, à savoir SWFObject. SWFObject est un script JavaScript capable d’afficher un contenu alternatif aux personnes ne disposant pas du plugin (correct) Flash Player. Nous en discuterons de manière plus approfondie au cours de la partie SEO de cet article..
Ok, désolé les gars, je n'ai pas mentionné une petite incohérence dans le navigateur. En raison d’une décision de brevet, les plug-ins chargés par l’utilisation de
Encore une fois, SWFObject peut nous aider à supprimer ce comportement cliquer-pour-activer. En intégrant simplement une animation Flash avec SWFObject, le comportement cliquer pour activer disparaît. Kirupa propose un excellent didacticiel expliquant comment utiliser SWFObject pour résoudre le problème de l'intégration..
Avec n'importe quel site que vous dirigez ou que vous possédez, vous souhaiterez la liberté de gérer le contenu qu'il contient. La chose la plus importante est que vous alliez dynamique; chargez votre contenu en externe afin que vous soyez libre de le modifier aussi souvent que nécessaire. Utilisez des champs de texte statiques uniquement si vous êtes certain de ne jamais modifier le texte à l'intérieur de ces champs..
Il est très courant de stocker votre contenu dans un fichier XML, puis dans votre site Flash, vous chargez ce fichier XML et affichez son contenu..
Voici un exemple, nous avons notre fichier XML nommé content.xml:
Salut mon nom est Daniel.
Ensuite, nous pourrions accéder à son contenu dans Flash avec un script du type suivant:
Accentsconagua
// crée notre champ de texte var bio_text: TextField = new TextField (); bio_text.width = 400; bio_text.height = 400; addChild (bio_text); // notre requête var request: URLRequest = new URLRequest ('content.xml'); // charge notre requête var loader: URLLoader = new URLLoader (request); // une fois le chargement du chargement terminé, appelez la fonction displayContent loader.addEventListener (Event.COMPLETE, displayContent); function displayContent (event: Event) // stocke les données du chargeur dans une variable nommée xml var xml: XML = new XML (event.target.data); var xmlList: XMLList = new XMLList (xml); // change le texte de bio_text en ce qui est à l'intérieur du balises bio_text.text = xml.bio; Maintenant que notre contenu est stocké en externe (pas à l'intérieur de notre site Flash), il est plus facile de le gérer..
Heureusement, il existe bien sûr des systèmes de gestion de contenu (CMS) spécialement conçus pour Flash, qui facilitent grandement la gestion de contenu. Sur Designm.ag, il y a un bon article à lire, 15 solutions Flash CMS les plus prometteuses.
Avant même de commencer à discuter du référencement, il est important de savoir comment fonctionnent les moteurs de recherche. De petits programmes "explorent" le Web à la recherche de contenu pouvant être indexé sur un moteur de recherche. Ces programmes s'appellent des robots, des araignées, des fourmis et probablement quelque chose d'autre aussi.
Ces robots vont indexer le contenu HTML d'une page, bien que (voici le problème) Flash est simplement incorporé dans le code HTML d'une page, de sorte que le moteur de recherche n'a aucune idée de ce qu'il contient. Si nous voulons que les moteurs de recherche indexent notre site, nous devons les orienter vers du contenu HTML qu’il peut indexer..
Alors maintenant, nous pouvons vraiment commencer à parler de SEO, qu'est-ce que le SEO en réalité? Eh bien, Wikipedia réussit à l'expliquer sur place:
L'optimisation des moteurs de recherche (SEO) est le processus d'amélioration du volume ou de la qualité du trafic sur un site Web à partir des moteurs de recherche, via des résultats de recherche "naturels" ou non payés ("organiques" ou "algorithmiques")..
Fondamentalement, nous essayons de résoudre un problème:
"Comment puis-je rendre le contenu de mon site Flash accessible aux moteurs de recherche?"
Heureusement, il existe plusieurs solutions. Passons-les un par un:
SWFObject est un script JavaScript qui permet d’afficher un contenu alternatif à l’utilisateur, s’il n’a pas de plugin Flash Player obsolète (ou obsolète). Et si l'utilisateur n'a pas JavaScript, il se dégrade gracieusement. SWFObject présente trois avantages:
Cependant, SWFObject a un petit problème: il affichera un contenu alternatif pour l’ensemble du film Flash. Évidemment, il est un peu trop important d’afficher tout le contenu de notre site flash sur une page. Idéalement, nous voudrions afficher l’alternative pour la page spécifique que le bot ou l’utilisateur visite..
Maintenant, je n'ai pas trouvé de solution bien documentée, cependant j'ai décidé d'utiliser une combinaison de détection Flash et SWFAddress. Permettez-moi d’abord d’expliquer ce que SWFAddress est.
George Kendros explique dans son tutoriel Construire un modèle de site Web simple à l'aide de SWFAddress place ce que fait SWFAddress:
SWFAddress est une bibliothèque Javascript / ActionScript qui vous permet de modifier l'URL du navigateur, d'ajouter des entrées à sa liste d'historique et de déclencher des événements ActionScript lorsque l'URL change. Il permet également aux moteurs de recherche de trouver du contenu spécifique sur votre site..
Avec SWFAddress, nous pouvons utiliser une liaison dite profonde. Un lien profond est un lien qui pointe vers une page spécifique au lieu de la page d'accueil. Cela signifie que nous pouvons utiliser SWFAddress pour créer un lien vers une page spécifique de notre site Flash..
Alors qu'allons-nous faire?
Nous allons d’abord créer un site HTML, ce site HTML sera destiné aux bots et aux utilisateurs qui ne peuvent pas voir notre site Flash. Nous utiliserons également un script de détection Flash, qui redirigera l'utilisateur vers le site Flash, s'il dispose du plug-in Flash Player approprié. La redirection utilise des liens profonds. Nous pouvons donc rediriger l'utilisateur vers la même page, mais au sein du site Flash..
Comment détecter si l'utilisateur a le bon plugin Flash Player installé? Eh bien, il existe un article sur Kirupa intitulé Scripts de détection flash. Vous y trouverez un script de détection Flash, que j'ai un peu modifié:
fonction redirect (version, flash_url) var MM_contentVersion = version; var plugin = (navigator.mimeTypes && navigator.mimeTypes ["application / x-shockwave-flash"])? navigator.mimeTypes ["application / x-shockwave-flash"]. enabledPlugin: 0; if (plugin) mots var = = navigator.plugins ["Shockwave Flash"]. description.split (""); pour (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 (navigator.userAgent && navigator.userAgent.indexOf ("MSIE")> = 0 && (navigator.appVersion.indexOf ("Win")! = -1)) document.write (' \ n '); // FS masque cela depuis IE4.5 Mac en scindant la balise document.write ('sur error resume next \ n'); document.write ('MM_FlashCanPlay = - IsObject (CreateObject ("ShockwaveFlash.ShockwaveFlash." document.write (' \ n '); if (MM_FlashCanPlay) window.location.replace (flash_url); else // rien ne doit être fait, restez sur cette page Dans notre page HTML, nous pouvons maintenant appeler avec JavaScript la fonction redirect, qui ne nécessitera que deux paramètres, à savoir la version de Flash Player, et l'URL de la page vers laquelle elle doit être redirigée si l'utilisateur dispose du bon plugin Flash Player. Disons que nous avons la page HTML suivante:
Sur Lorem ipsum dolor sit amet, consectetur elip adipiscing elit…
Nous allons nous concentrer sur la 8ème ligne. Ce qui va arriver est le suivant; si l'utilisateur dispose de Flash Player 10, il sera redirigé vers http://www.example.com/#/about puis SWFAddress utilisera des liens profonds pour afficher la page correcte dans le site Flash..
Créer un site Web Flash est difficile, pour plusieurs raisons. Tout d'abord, vous devrez passer beaucoup de temps à tout coder, nous devons écrire du code pour presque tout. Nous devons coder des graphiques dynamiques, nous devons coder la mise en page, en maintenant les éléments positionnés à l'endroit souhaité. Nous devons coder et / ou animer des transitions entre les pages. Nous devons charger le contenu et l'afficher également. Créer un site Flash prend beaucoup de temps et c'est compliqué, ne le prenez pas à la légère.
Heureusement pour nous, plusieurs frameworks peuvent faciliter le développement d’un site Flash. Ces cadres peuvent différer par leur offre, mais chaque cadre peut vous aider à alléger votre charge de travail dans un domaine spécifique..
Voici quelques cadres qui pourraient vous aider pendant le développement:
J'aime vraiment les sites Flash. Une fois conçus correctement, ils sont incroyablement beaux, mais il y a une chose très importante à retenir:
Les sites concernent le contenu qu'ils communiquent à l'utilisateur. Flash fournit simplement un moyen d'afficher ce contenu..
Qu'est-ce que je veux dire avec cela? Un blog veut que les gens lisent les articles, sa conception doit donc permettre à l’utilisateur de lire facilement un article.. Flash n'est pas nécessaire pour cela.
Toutefois, si vous envisagez de créer un site de portefeuille de photographies, vous souhaitez en afficher le contenu (images) de manière simple et conviviale pour l'utilisateur. Cliquer sur les liens et attendre le chargement des images n’est pas une expérience utilisateur enrichissante. Flash est une possibilité de fournir le contenu de manière plus intuitive. Le site de Lesse Pedersen utilise une excellente navigation pour servir le contenu (images) à l'utilisateur.
Il existe également un excellent article sur le site Wake Up Later, intitulé 6 Lieux auxquels Flash n’appartient pas, que je crois que vous devriez tous lire..
J'ai de nouveau passé un bon moment à écrire pour Activetuts +. J'espère que vous avez appris quelque chose et pourquoi ne pas vous joindre à la discussion? Laissez un commentaire et vous pourrez bien sûr me trouver sur Twitter, @DanielApt.
