Vous trouverez des tutoriaux sur le référencement d'un site flash, des exemples de codes pour la création d'un livre d'or, d'une galerie photo, d'un lecteur de flux rss et un framework HAXE, AS3 et AS2 permettant de réaliser des applications RIA (par exemple delfiweb).
Delfiweb développe un framework open source permettant la réalisation d'applications en flash. Ce framework comprend les classes de bases pour réaliser une zone de contenu scrollable, des boutons, des listes, des pop up...
Le site Delfiweb a été entièrement conçu avec ce framework. Toutes vos remarques sont les bienvenues pour contribuer à l'amélioration du framework Delfiweb.
Télécharger le Framework Delfiweb (nombre de téléchargements : ##package_delfiweb##). Il est préférable d'utiliser directement l'adresse du répertoire SVN qui contient la version la plus à jour du framework Delfiweb sur RIA forge (http://svn.riaforge.org/framework_delfiweb/).
Le framework Delfiweb sera diffusé petit à petit avec une documentation complète, des tutoriaux comprenant des exemples concrets (player vidéo, player MP3, galerie photo).
For english users, look some informations at this webpage : OS Flash (english)
Pour les personnes désirant améliorer leur niveau en programamtion Action Script, voici le lien d'un site contenant énormément d'informations : Formations Action Script chez MediaBox.
Note : pour afficher la version HTML du site : Version HTML.
Bonne visite sur Delfiweb.
Matthieu
09-10-2007 : Mise à jour du Forum Delfiweb avec une version offrant plus de fonctionnalités. Ajout de nouvelles classes dans la version AS2 du Framework Delfiweb (gestion du texte défilant dans les titres, les boutons), corrections et amélioration des classes de la version AS3.
03-09-2007 : Sortie de la version HAXE (et AS3) du Framework Delfiweb. Toute l'architecture du framework (voir les fonctionnalités) a été repensé afin de disposer des nouvelles fonctionnalités apportées par le langage HAXE.
15-08-2007 : Mise à jour de la liste des Tutoriaux.
12-08-2007 : Création d'un Livre d'Or avec le Framework Delfiweb. N'oubliez de télécharger le Framework Delfiweb afin de pouvoir compiler le livre d'or.
31-07-2007 : Voici un pack contenant plein d'images vectorielles pour vos swf : télécharger le fla. Pour visualiser un aperçu des icônes.
30-07-2007 : Création d'un éditeur de texte avec le Framework Delfiweb. N'oubliez de télécharger le Framework Delfiweb afin de pouvoir compiler l'éditeur.version de démonstration.
25-07-2007 : Correction de bugs sur le framework delfiweb et ajout de nouvelles fonctionnalités, je vous laisse les découvrir par vous même : Framework Delfiweb.
11-07-2007 : Nouvelle fonctionnalité sur Delfiweb.com, il est désormais possible d'utiliser les boutons suivant, précédent et rafraichir de votre navigateur, ou d'aller directement sur la rubrique souhaité, pour tester : Contact Delfiweb, Framework Delfiweb. Ansi que la conservation du bouton sélectionné lors d'un changement de thème à la volée.
12-06-2007 : Nouveau tutoriel Présentation, configuration et utilisation de l'éditeur AS2 FDT.
11-06-2007 : Nouveau tutoriel Apprenez à utiliser des polices partagées dynamiquement en AS2.
07-05-2007 : 2 nouveaux tutoriels pour apprendre à utiliser le framework delfiweb : Utiliser la classe Square et Utiliser les classes Label, Button et LockedButton.
03-05-2007 : Ajout de la classe ComboBox au framework delfiweb et amélioration de plusieurs classes.
17-04-2007 : Ajout d'une nouvelle fonctionnalité au moteur Delfiweb : la gestion dynamique des templates (des templates différents vont bientôt arriver).
05-04-2007 : Ouverture du Blog Delfiweb.
25-02-2007 : Ajout des classes List, PopUp, Tooltip et Button au framework.
17-02-2007 : Ajout des classes PlaceHolder, Scrollbar et d'une page d'exemple des possibilités du framework.
27-01-2007 : Ajout des classes Square et Label au framework Delfiweb. Mise à jour de la documentation du package.
20-01-2007 : Sortie de la 1ère version du package AS2 Delfiweb (version béta 0.1).
20-01-2007 : Sortie de la version 3 du site Delfiweb.
13/11/2006 : Mise à jour du tutorial sur le référencement d'un site flash.
20/08/2006 : Mise à jour du préloader (version intégrant plus de fonctionnalités).
05/03/2006 : Ajout d'un effet Noir & Blanc sur le CV en Flash 8.
03/03/2006 : Mise à jour du Tutorial sur le référencement d'un Site Full Flash. Intégration des textes dans une div scrollable.
22/02/2006 : Ajout d'un Livre d'Or sur DelfiWeb. Son code source est également disponible.
14/02/2006 : Ajout d'un tutorial sur le référencement d'un site Flash.
09/02/2006 : Ajout du code source de mon CV réalisé avec les nouveaux effets disponibles avec Flash 8.
31/01/2006 : Ajout des codes sources des swf qui sont en version finale.
28/01/2006 : DelfiWeb recherche des partenaires pour effectuer un échange de liens. Si vous êtes intéressé, n'hésitez pas à me contacter.
24/01/2006 : Mise en ligne de la version 2 de DelfiWeb. N'hésitez pas à laisser vos remarques sur le Forum.
01/01/2006 : Ajout d'un nouveau code source dans la rubrique Projet : un Formulaire Mail.
15/12/2005 : Ajout d'un nouveau code source dans la rubrique Projet : un Préloader.
05/12/2005 : Ajout d'un nouveau swf dans la rubrique Projet : un Site Full Flash.
25/11/2005 : Ajout d'un nouveau code source dans la rubrique Projet : un Lecteur de Flux RSS.
15/11/2005 : Ajout d'un nouveau code source dans la rubrique Projet : une Galerie Photo.
01/11/2005 : Mise en ligne de la version 1 de DelfiWeb. N'hésitez pas laisser vos remarques sur le Forum.
Architecture du site Delfiweb :
DelfiWeb est conçu sur une architecture de type MVFC (Modèle Vue Front Controler). Voici l'url d'un site qui m'a aidé à comprendre cette architecture : MVFC
L'excellent logiciel MTASC est utilisé pour compiler delfiweb.
Le framework est compilé dans un swf contenant seulement des classes AS2, le site charge donc cette bibliothèque au démarrage (plus précisément, c'est le préloader qui effectue ce chargement).
Tout au long de la navigation, les fichiers xml nécessaires au fonctionnement sont chargés à la volée et stockés sous forme d'objets (afin d'éviter des téléchargements de fichiers redondants).
Delfiweb utilise également l'excellent framework PixLib développé par Francis Bourre : PixLib. Pour effectuer le debug du code, 2 logiciels sont utilisées : FlashInspector ainsi que Xray (qui se complète).
Evolutions du framework :
les versions HAXE et AS3 sont disponibles (voir les fonctionnalités). Toute l'architecture a été repensé afin de profiter des fonctionnalités fournies par le langage HAXE.
Prochainement : l'intégration d'un parseur xml universel (grâce aux librairies haxe), la gestion de design pattern directement par le framework delfiweb (MVC dans un premier temps).
Framework Delfiweb API Documentation
Le framework Delfiweb est entièrement compatible avec le compilateur MTASC (version AS2).
Voir le diagramme UML pour représenter les relations entre les différentes classes.
Ce framework s'adresse plutôt à des développeurs débutants. Il fournit des classes de base pour réaliser des RIA (Rich Internet Application).
Télécharger le Framework Delfiweb (nombre de téléchargements : ##package_delfiweb##). Il est préférable d'utiliser directement l'adresse du répertoire SVN qui contient la toute dernière version Delfiweb sur RIA forge (http://svn.riaforge.org/framework_delfiweb/).
Et un très grand merci à FDT Powerflasher pour m'avoir offert une Licence. C'est un plugin eclipse très efficace pour coder en Action Script. Une fois qu'on la gouté, on ne peut plus s'en passer.
Un Livre d'Or Multitheme. Le fichier zip contient également un exemple d'utilisation et de personnalisation du livre d'or.
Télécharger les sources du Livre d'Or Multitheme (déjà téléchargée : ##guestbook## fois).
Caractéristiques :
- Ecriture du message via un éditeur de texte en flash.
- Possibilité de personnaliser graphiquement le livre d'or.
Un pack d'icônes vectorielles pour flash 8 ou supérieur : télécharger le fla (déjà téléchargée : ##icon_flash8## fois). Voici un aperçu des icônes.
Un Editeur de Texte en Flash. Le fichier zip contient également un exemple d'utilisation et de personnalisation de l'éditeur.
Télécharger les sources de l'éditeur de texte (déjà téléchargée : ##editeur## fois).
Caractéristiques :
- Modification de l'affichage de la police (gras, italique, souligné).
- Modification de l'alignement de la police (gauche, centré, droite, justifié).
- Fonction annuler / rétablir les modifications du texte.
- Support des polices dynamiques partagées.
Plus d'informations sur l'éditeur Flash sur Tutoriel Editeur Flash
Un préloader de fichier swf. Le fichier zip contient également un exemple d'intégration d'un swf en utilisant du javascript (pour éviter le blocage sous IE).
Télécharger les sources du Préloader de swf (déjà téléchargée : ##preloader## fois).
Caractéristiques :
- Test de la version du flashplayer, auto update du Player Flash si la version est incorrecte (le numéro de la version minimum du Player Flash est fourni par le javascript.
- Si le Player Flash n'est pas installé, redirection sur une page proposant son téléchargement.
- Possiblité pour le préloader de télécharger plusieurs fichiers swf, par exemple le 1er qui contient la bibliothèque des classes AS et le 2ème qui est l'application elle-même (biblio.swf|site.swf).
- Test de la validité des urls des fichiers swf cible. S'ils n'existent pas, un messsage d'erreur s'affiche.
- Le Préloader se met au centre de la scène automatiquement.
- Le Préloader affiche le pourcentage de téléchargement global des fichiers swf cible.
- Utilisation du javascript pour l'intégration dans une page web (valide HTML and XHTML).
Plus d'informations sur le Préloader Flash sur Tutoriel Préloader Flash
Un CV en Flash : Démo
Il peut être utilisé pour les personnes désirant présenter leurs compétences.
Le CV contient des exemples d'utilisation des nouvelles classes de Flash 8 comme par exemple : des effets de Blur, perlinNoise, DisplacementMapFilter et de la classe BitmapData.
Télécharger les sources du CV en Flash 8 (déjà téléchargée : ##cvflash8## fois).
Plus d'informations sur le CV en Flash sur Tutoriel CV en Flash
Un Livre d'Or en Flash : Télécharger le Livre d'Or Flash. Démo
Il peut être utilisé pour les webmasters désirant connaitre l'avis des visiteurs à propos de leur site.
Télécharger les sources du Livre d'Or.
Plus d'informations sur le Livre d'Or en Flash sur Tutoriel Livre d'Or en Flash
Un Site Full Flash : Télécharger le Site Full Flash (déjà téléchargé : ##siteflash## fois). Démo
Caractéristiques :
- possibilité de personnaliser les couleurs de chaque bouton et des textes du menu.
- possibilité de personnaliser la couleur du fond du menu.
- possibilité de personnaliser l'image de fond.
- possibilité d'ajouter un logo.
Bientôt la sortie de la version 2 du site Full Flash personnalisable en Open Source (la version actuelle de Delfiweb), avec la gestion des templates, des polices partagées...
Un Formulaire d'envoie de Mail : Télécharger le Formulaire Mail. Démo.
Très utile pour les webmaster désirant intégrer un formulaire de contact.
Télécharger les sources du formulaire d'envoie de mail (déjà téléchargée : ##form_mail## fois).
Plus d'informations sur le Formulaire d'envoie de Mail sur Tutoriel Formulaire d'envoie de Mail.
Un lecteur de Flux RSS : Télécharger le lecteur RSS. Démo.
Caractéristiques :
- choix des flux RSS via un fichier xml.
- possibilité de personnaliser les textes du chargement et le titre.
Télécharger les sources du Lecteur de Flux RSS (déjà téléchargé : ##lecteurrss## fois).
Plus d'informations sur le lecteur de Flux RSS sur Tutoriel lecteur de Flux RSS.
Une Galerie Photo : Télécharger la galerie photo. Démo
Une galerie photos dynamiques tout en flash.
La version 2 sera bientôt disponibles avec des fonctionnalités plus abouties (diaporama en musique, choix des effets d'apparition, choix de l'interface...)
- Télécharger les sources de la Galerie Photo (déjà téléchargée : ##galeriephoto## fois).
Plus d'informations sur la Galerie Photo sur Tutoriel Galerie Photo.
Copyright des projets Delfiweb :
* Toutes les sources disponibles (sauf le Framework Delfiweb) sur DelfiWeb sont sous Licence Creative Commons.
Vous êtes libres : de reproduire, distribuer et communiquer cette création au public, de modifier cette création.
Selon les conditions suivantes : Paternité : vous devez citer le nom de l'auteur original - Pas d'Utilisation Commerciale : vous n'avez pas le droit d'utiliser cette création à des fins commerciales - Partage des Conditions Initiales à l'Identique.
Récapitulatif des liens de téléchargement :
- Télécharger les sources du Livre d'Or Multitheme (déjà téléchargée : ##guestbook## fois).
- Télécharger les icônes vectorielles Flash8 (déjà téléchargée : ##icon_flash8## fois).
- Télécharger les sources de l'éditeur de texte (déjà téléchargée : ##editeur## fois).
- Télécharger les sources du Livre d'Or.
- Télécharger les sources de la Galerie Photo (déjà téléchargée : ##galeriephoto## fois).
- Télécharger les sources du Lecteur de Flux RSS (déjà téléchargé : ##lecteurrss## fois).
- Télécharger les sources du Préloader de swf (déjà téléchargée : ##preloader## fois).
- Télécharger les sources du formulaire d'envoie de mail (déjà téléchargée : ##form_mail## fois).
- Télécharger les sources du CV en Flash 8 (déjà téléchargée : ##cvflash8## fois).
Création d'un Livre d'or Multi Theme avec le Framework Delfiweb : exemple d'utilisation du framework Pixlib avec l'implémentation du design pattern MVFC (Modèle Vue Front Controller), conversion des fichiers xml en objet flash et pour finir utiliser le flash remoting avec Pixlib et AMFPHP.
Créer un Editeur de Texte avec le Framework Delfiweb.
Apprenez à utiliser des polices partagées dynamiquement en AS2 avec swfmill et le framework AS2 delfiweb.
Référencer un site flash :
Pour augmenter la visibilité votre site flash sur les moteurs de recherche Internet, vous devez obtenir des liens pointant vers votre site. Privilégiez le contenu (l'information), la qualité, l'esthétique et l'ergonomie avant même de vous pencher sur le référencement de votre site !
- Ajouter du contenu dans la source de votre page HTML. Le mieux est l'utilisation d'une zone de texte scrollable en CSS derrière votre animation flash, il est possible d'insérer tout le texte contenu dans votre site flash dans le code source de votre page HTML. De ce fait le contenu sera indexer par les moteurs de recherche. Ce texte doit être cohérent avec le thème de votre site, il sera visible lorsque le navigateur du visiteur a désactivé le javascript.
Cette technique est utilisée pour référencer DelfiWeb, je dois vous prévenir qu'il y a comme même un risque de blacklistage de votre site par google si vous abusez trop de cette astuce.
Vous devez créer un fichier CSS contenant la balise
.referencement{
width:700px;/* défini la taille de la zone scrollable */
height:500px;
background-color:#ffffff;
text-align:left; /* aligne le texte à gauche */
overflow:auto;/* cette propriété va permettre le scrolling du bloc */
}
et dans votre page HTML <div id="flashcontent">
<div class="referencement">
Le contenu de votre site flash
</div>
</div>.
Grâce à cette astuce, vous pouvez donc intégrer le contenu de votre site flash, les visiteurs ne verront pas le texte (sauf si le javascript est désactivé, sinon il sera visible uniquement par les moteurs de recherche).
Ensuite, il ne vous reste plus que l'ajout de votre animation flash (voir l'exemple complet avec le loader de swf). En fait l'astuce consiste à ajouter le contenu de votre site flash dans un div scrollable, ce champ texte scrollable est masqué par l'animation Flash. Sur certain navigateur, on le voit apparaitre une demi seconde, ce qui n'est guère dérangeant pour le design graphique d'un site.
- Certains moteurs savent indexer le flash. Certains moteurs commencent à indéxer (partiellement) le contenu des fichiers swf. C'est le cas de Fast / Alltheweb, Google et Dir.com. Pour vous faire une idée de la manière dont les moteurs voient vos fichiers swf : flash-moteurs.
- Choisissez bien les titres de pages. Google peut représenter en moyenne 60% de vos visiteurs. Le titre de la page est un élément important pour google, donc soignez la rédaction des titres de vos pages. En effet, si votre site est assez bien optimisé pour le référencement, un visiteur sur deux viendra de google.
- Des mises à jour régulières. Les moteurs aiment généralement ce que les visiteurs apprécient également. Ainsi, l'apport régulier de nouveaux contenus montre que votre site vit. Donc n'hésitez pas à créer un petit module de news, par exemple.
- Version HTML du site. Vous pouvez créer, de la même manière que pour l'outil de news, une version simpliste de votre site en html. Cela permettra aussi de rendre accessible votre site aux navigateurs ne disposant pas de Player Flash compatible avec votre site.
- Faire un plan de site. Difficile à créer pour un site en flash. Très utile, cela permet aux visiteurs et aux moteurs d'apercevoir le contenu de votre site. Si vous le pouvez, mettez ce plan dans votre page d'erreur 404.
- Creer un fichier sitemap.xml. Le protocole Sitemap vous permet d'indiquer aux moteurs de recherche les URL à explorer sur votre site Web. Dans sa forme la plus simple, un plan Sitemap utilisant le protocole Sitemap est un fichier XML qui répertorie les URL de votre site. Concrètement, un fichier sitemap xml sert à aider les GoogleBots à crawler plus rapidement et plus en profondeur les pages de votre site (Voir le tutorial de google).
- Liens externes de qualité. Afin de montrer à Google que votre site s'intéresse à ceux qui sont bien faits, n'hésitez pas à y ajouter des liens vers des sites de qualité, particulièrement ceux qui sont de thème proche du votre (et eux-mêmes bien référencés). Il peut être utile d'échanger des liens avec d'autres webmasters si vous l'êtes vous-même.
- Beaucoup de liens vers votre site. Cela augmente de manière significative votre référencement dans les moteurs. Si d'autres sites possèdent beaucoup de liens vers votre site, le moteur comprendra qu'il vaut le détour, vous gagnerez sans doute des places. Privilégiez donc les sites proches ayant le même thème que le votre.
- Figurer dans les grands annuaires (dmoz, yahoo, MSN, Voila, Nomade). Le fait d'apparaître sur les principaux annuaires est un gage de qualité pour votre site. En effet, les annuaires représentent des liens de qualité, et en plus de vous apporter des visites, il vous permettra de remonter dans le classement des moteurs. N'oubliez pas également de référencer votre site dans un maximum de plus petits annuaires. Il garantissent un lien vers votre site. Vous pourrez sans doute être accepté dans 200 à 500 petits annuaires francophones assez facilement si votre site est de qualité. Et donc autant de liens existeront vers votre site. Pensez également à proposer votre site sur les quelques sites proposant de mettre en avant les sites en Flash, ils sont une bonne vitrine.
- Messages alternatifs sur les images. Très important, autant pour la validation des standards que pour le référencement, n'oubliez pas de renseigner l'attribut "alt" des balises images, avec un texte explicatif. En effet, les moteurs ne voient pas les images, mais seulement ces textes.
- Utilisez les balises prédéfinies. Certaines balises Html étaient au départ prédéfinies avec une mise en forme particulière, mais elles ont perdu leur première utilité, même si elles sont de nouveau utilisées avec les mises en pages CSS. Par exemples, les balises de titre h (h1, h2...) sont considérées par certain moteurs comme ayant vraiment de l'importance. Utilisez-les donc, couplées à un style CSS pour en faire ce que vous voulez. Attention à ne pas afficher que des titres dans votre page...
- Pas de texte de la même couleur que le fond. Inutile de cacher votre texte noir dans un fond noir. Les moteurs le voient et blacklistent votre site.
- Texte pour les liens en rapport avec la page liée. Lorsque vous créez des liens, le texte que vous mettez en lien aura plus d'importance que le texte auquel vous n'aurez pas affecté de lien. Sachez également qu'il est préférable que le texte en lien soit en rapport le plus précis possible avec la page effectivement liée. Donc n'hésitez pas dans des articles à mettre des liens vers des sites importants. Cette technique est plus difficile à appliquer dans le cas de sites 100% Flash, mais peut être utile si vous faites une page de liens en html. Il sera donc par exemple préférable de mettre l'intitulé MediaBox : portail Flash que MediaBox simplement.
- Choisir son titre. Elément fondamental du référencement, le titre d'une page est déterminant.Tout d'abord le titre doit être pertinent et en rapport avec le contenu de la page.
- Les balises META. Tous les moteurs n'en tiennent pas compte. Mais vous pouvez renseigner dans ces balises une petite description de votre site. La description doit être un résumé de ce que contient la page. Essayez de répéter les mots utilisés dans le titre. De la même manière, ne multipliez pas à l'infini vos mots clés, ne renseignez que les plus importants.
- Le contenu. Si vous n'aviez pas spécialement prévu de contenu, l'insertion de texte dans la page est très important. Si vous avez peu de pages à faire, passez un peu de temps sur le texte à insérer. Essayez de créer un texte mis en forme, en utilisant les balises h par exemple, qui répétera 3 à 5 fois les mots clés importants (utilisés par exemple dans le titre).
- Le respect des normes W3C. Pour un site flash, cela peut prêter à sourire, mais pour afficher du flash, il est nécessaire d'utiliser du code html. L'objectif est de respecter les normes du W3C. Votre code doit être valide CSS et XHTML 1.0 (au minimum). Cela est très apprécié des moteurs de recherche.
Conclusion : Vous vous demandez peut être ce qui fait qu'une page se retrouve devant une autre dans Google, par exemple ? La réponse ne peut être qu'imprécise, sachant que l'algorithme des moteurs est inconnu et caché, et qu'il change souvent. Cependant, sans connaître l'importance de chacun, on peut quand même s'apercevoir que l'algorithme repose sur ces critères :
- le contenu de la page (les mots recherchés y figurent)
- le contenu du titre
- popularité de la page (nombre de liens vers cette page)
- la redondance du mot recherché dans la page (si le mot qui y figure est présent plusieurs fois)
Faites toutefois attention à ne pas trop répéter les mots importants dans vos pages. Attention aussi à ne pas rendre un site moins ergonomique en utilisant de trop ces techniques référencement (Plus de détails sur le référencement Webrankinfo).
Ce tutorial est un résumé de tous les tutoriaux concernant le référencement d'un site flash que j'ai trouvé sur Internet.
Ces différentes techniques sont utilisées depuis 1 an sur DelfiWeb. Elles ont aussi été mises en pratique sur plusieurs autres sites.
Pour l'instant, il n'y a eu aucun problème de blacklistage ou autre avec les moteurs de recherche.